CSS选择器和属性
Posted yzx-sir
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS选择器和属性相关的知识，希望对你有一定的参考价值。
CSS选择器
概念：选择器是选取旭设置样式的：
分类：
1.元素选择器
元素名称color:red;
2.id选择器
#id属性color;red;
3.类选择器
.class属性值color:red;
<!DOCTYPE html> <html lang="en"> <heah> <meta charset="UTF-8"> <title>Title</title> <style> div color: red; #name color: blue; </style> </heah> <body> <div>div001</div> <div id="name">div002</div> <div>div003</div> <div>div004</div> <div>div005</div> <span>span</span> </body> </html>
CSS属性
定义和用法
border-color 属性设置四条边框的颜色。此属性可设置 1 到 4 种颜色。
border-color 属性是一个简写属性，可设置一个元素的所有边框中可见部分的颜色，或者为 4 个边分别设置不同的颜色。
要记住，边框的样式不能为 none 或 hidden，否则边框不会出现。
注释：请始终把 border-style 属性声明到 border-color 属性之前。元素必须在您改变其颜色之前获得边框。
CSS3：空选择器和内容属性
【中文标题】CSS3：空选择器和内容属性【英文标题】：CSS3 :empty selector and content property 【发布时间】：2012-12-15 15:47:34 【问题描述】：我想要一起使用 CSS3 的 :empty psedo-selector 和 CSS3 的 content 属性来向空列表添加一些文本，如下面的小提琴所示：
http://jsfiddle.net/ZesAC/2/
我了解到 CSS 只允许在 :after 或 :before 选择器中使用 content。是否有允许设置空列表样式的解决方案？
编辑
正如我在 cmets 中了解到的，您可以在 CSS3 中的任何位置使用content（在大多数浏览器中无效 [截至 2012 年 12 月 31 日]）并且仅在CSS2 中的 :after 和 :before 块。 （感谢@BoltClock）
如果您不介意特定于 Firefox，您可以使用 -moz-only-whitespace 选择器使其行为更符合逻辑。 （感谢@robertc）
【问题讨论】：
CSS3 的content 属性在任何地方都可以使用，但几乎不存在实现。 CSS2 的content 属性只允许在:after 和:before 中使用。
@BoltClock 啊，我被我读到的东西误导了。感谢您的提醒。
【参考方案1】：
原来我在提问中回答了我自己的问题：
http://jsfiddle.net/M6xZj/2/
您可以使用 :after 和 :empty 元素在 UL 之后添加一些内容。毕竟，它是空的，所以它保证位于列表所在的位置。
【讨论】：
Be careful with:empty，另见:-moz-only-whitespace（很遗憾不是标准）。
谢谢@robertc。我知道 :empty 有一些模糊/非常愚蠢的行为。不过感谢警告！现在不知道only-whitespace！ :) 这很酷。
同意。值得注意的是，:empty 不会匹配 <div> </div> 之类的东西（注意空格，但会匹配 <div></div>（没有空格）。【参考方案2】：
.some_class_name:empty::after
content: "-";
【讨论】：
以上是关于CSS选择器和属性的主要内容，如果未能解决你的问题，请参考以下文章