CSS 中选择器的详解

[color=#345286] 原文出处：[url=http://mydioxide.com/?p=132]http://mydioxide.com/?p=132[/url][/color]
[color=#345286] 译自：[url=http://www.smashingmagazine.com/2009/08/17/taming-advanced-css-selectors/][b]Taming Advanced CSS Selectors[/b][/url][/color]

[color=#345286] CSS 是对网页设计师最强大的工具之一。使用它我们可以在几分钟内改变一个网站的界面，而不用改变页面的标签。事实上，尽管我们每个人都意识到了它是有用的，但 CSS 选择器远未发挥它们的潜力，[b]有的时候我们还趋向于使用过多的和无用的 class、id、div、span 等把我们的 HTML 搞的很凌乱。[/b][/color]

[color=#345286] 避免让这些“瘟疫”在你的标签中“传播”并保持其简洁和语义化的最佳方式，就是使用更复杂的 CSS 选择器，它们可以定位于指定的元素而不用[b]使用没有必要的 class 或 id[/b]，而且通过这种方式也可以[b]让我们的代码和样式更加灵活。[/b]要做到这些，我们要熟练掌握下面的知识！[/color]

[color=#FF0000][b][size=medium]CSS 的优先级[/size][/b][/color]
[color=#345286] 在深入研究高级 CSS 选择器领域之前，理解 CSS 优先级是如何工作的是很重要的，这样我们就知道如何适当的使用选择器来避免浪费大量的时间来调试一些[b]只要我们注意到优先级的话就很容易被搞定的问题(好长！)[/b][/color]

[color=#345286] 当我们写 CSS 的时候必须注意有些选择器在级联(cascade)上会高于其它选择器，写在最后面的选择器将不一定会覆盖前面写在同一个元素的样式。[/color]

[color=#345286] 那么你如何计算指定选择器的优先级？如果你考虑到将优先级表示为用逗号隔开的四个数字就会相当简单，比如：1, 1, 1, 1 或 0, 2, 0, 1。[/color]
[list=1]
[*] [color=#345286]第一个数字(a)通常就是 0，除非在标签上使用 style 属性；[/color]
[*] [color=#345286]第二个数字(b)是该选择器上的 id 的数量的总和；[/color]
[*] [color=#345286]第三个数字(c)是用在该选择器上的其它属性选择器和伪类的总和。这里包括 class(.example) 和属性选择器(比如 li[id=red])；[/color]
[*] [color=#345286]第四个数字(d)计算元素(就像 table、p、div 等等)和伪元素(就像 :first-line 等)；[/color]
[*] [color=#345286]通用选择器(*)是 0 优先级；[/color]
[*] [color=#345286]如果两个选择器有同样的优先级，在样式表中后面的那个起作用。[/color]
[/list]
[color=#345286] 让我们看几个例子，这样或许比较容易理解些：[/color]

#sidebar h2 — 0, 1, 0, 1
h2.title — 0, 0, 1, 1
h2 + p — 0, 0, 0, 2
#sidebar p:first-line — 0, 1, 0, 2

[color=#345286] 在下面的例子中，第一个将会起作用，因为它比第二个优先级高：[/color]

#sidebar p#first { color: red; } — 0, 2, 0, 1
#sidebar p:first-line { color: blue; } — 0, 1, 0, 2

[color=#345286] 基本理解优先级是如何工作的是很重要的，在使用一些工具比如 [b]Firebug[/b]，在查看指定元素的时候，[b]Firebug[/b] 会按照选择器的优先级依次列出所有的 css 选择器对让我们知道[b]在指定元素上哪个选择器是有效的是很有用的。[/b]并会在不起作用的条目上加删除线！[/color]

[color=#FF0000][b][size=medium]1、属性选择器[/size][/b][/color]
[color=#345286] 属性选择器(Attribute selector)让你可以基于属性来定位一个元素。你可以只指定该元素的某个属性，这样所有使用该属性——而不管它的值——的这个元素都将被定位，也可以更加明确并定位在这些属性上使用特定值的元素 —— 这就是属性选择器展示它们的威力的地方。[/color]

[color=#345286] 有6个不同类型的属性选择器：[/color]
[color=#345286] [b]● [att=value][/b][/color]
[color=#345286] 该属性有指定的确切的值。[/color]

[color=#345286] [b]● [att~=value][/b][/color]
[color=#345286] 该属性的值必须是一系列用空格隔开的多个值，(比如，class="title featured home")，而且这些值中的一个必须是指定的值 value。[/color]

[color=#345286] [b]● [att|=value][/b][/color]
[color=#345286] 属性的值就是 value 或者以 value 开始并立即跟上一个 "-" 字符，也就是 "value-"。(比如lang="zh-cn")[/color]

[color=#345286] [b]● [att^=value][/b][/color]
[color=#345286] 该属性的值以指定值开始。[/color]

[color=#345286] [b]● [att$=value][/b][/color]
[color=#345286] 该属性的值以指定的值结束。[/color]

[color=#345286] [b]● [att*=value][/b][/color]
[color=#345286] 该属性的值包含指定的值(而无论其位置)。[/color]

[color=#345286] 比如，如果你想要[b]改变你的博客上的日志部分元素的背景颜色，[/b]你可以使用一个指定每一个 class 属性值以 "post-" 开始的 div 的属性选择器：[/color]

div[class|="post"] {
  background-color: #333;
}

[color=#345286] 该语句将匹配所有 class 属性包含 "post" 并带 "-" 字符的 div 元素。[/color]

[color=#345286] 属性选择器的另一个很有用的用处是[b]定位不同类型的 input 元素。[/b]比如，如果你想让你的文本输入框使用一个特定的宽度，你可以使用下面的属性选择器：[/color]

input[type="text"] {
  width: 200px;
}

[color=#345286] 这将匹配所有 type 属性值等于 "text" 的 input 元素。[/color]

[color=#345286] 现在我们可能想为网站上[b]不同的文件类型的链接添加不同的图标，[/b]这样你的网站的访客就会知道他们将获得一个图片、或者 PDF 文件、或者是一个 word 文档等。这就可以使用属性选择器来实现：[/color]

a[href*=".jpg"] {
  background: url(jpeg.gif) no-repeat left 50%;
  padding: 2px 0 2px 20px;
}

a[href*=".pdf"] {
  background: url(pdf.gif) no-repeat left 50%;
  padding: 2px 0 2px 20px;
}

a[href*=".doc"] {
  background: url(word.gif) no-repeat left 50%;
  padding: 2px 0 2px 20px;
}

[color=#345286] 在此例中，我们使用了一个定位所有的链接(a)的 href 属性分别以 .jpg, .pdf 或 .doc 结束(*)的属性选择器。这样一来指向三种文件的链接将会具有不同的样式！[/color]

[color=#000000][b] [u]● 浏览器兼容性[/u][/b][/color]
[color=#345286] [b]除了 Internet Explorer 6，所有的主流浏览器都支持属性选择器。[/b]这意味着，如果你在你的网站上使用了属性选择器，你应该[b]确保 IE6 用户将仍能获得一个可用的网站。[/b]比如我们的第三个例子，为链接添加图标可以给你的网站带来另一个级别的可用性，但是如果这些链接不显示任何图标，该网站仍然还是可用的。[/color]

[color=#FF0000][b][size=medium]2、子选择器[/size][/b][/color]
[color=#345286] 子选择器用符号 ">" 表示。它允许你[b]定位某个元素的第一级子元素。[/b][/color]

[color=#345286] 比如，如果你想匹配所有的作为你的网站侧栏的 div 的子元素的 h2 元素，而不是在 div 元素内的所有 h2 元素，也不是 div 的更低级别的元素，你就可以使用下面的选择器：[/color]

div#sidebar > h2 {
  font-size: 20px;
}

[color=#345286] 你当然也可以同时使用子元素和后代元素。比如，如果你想定位只有在 body 元素的子级 div 元素内的 blockquote 元素，而不是其它部分的：[/color]

body > div > div blockquote {
  margin-left: 30px;
}

[color=#000000][b] [u]● 浏览器支持[/u][/b][/color]
[color=#345286] 和属性选择器一样，子选择器不被 IE6 支持。如果你通过这种方式要实现的效果和网站的可用性或总体设计息息相关，你可以考虑使用一个 class，或者使用只针对 IE6 的样式，但是这将有悖使用子选择器的目的。[/color]

[color=#FF0000][b][size=medium]3、兄弟组合[/size][/b][/color]
[color=#345286] 有两类兄弟组合：[b]临近兄弟组合[/b]和[b]普通兄弟组合[/b]。[/color]

[color=#345286][b]● 临近兄弟组合[/b][/color]
[color=#345286] 该选择器使用加号 "+" 来链接前后两个选择器。选择器中的元素有同一个上级元素，而且第二个必须紧紧的跟着第一个。[/color]

[color=#345286] 临近兄弟组合可以非常有用，比如，在处理文字的时候。比如我们想对段落后面的 h2 标题添加一个顶间距 margin-top(当然或许你无需为 h1 标签后面的 h2 添加，或者它可能是页面的第一个元素)：[/color]

p + h2 {
  margin-top: 10px;
}

[color=#345286] 你甚至可以更加具体，你想定位某个特定的 div 后面的 h2：[/color]

div.post p + h2 {
  margin-top: 10px;
}

[color=#345286] 或者你可以搞得更加复杂：页面的第一个段落的第一行字母显示为小写字母：[/color]

.post h1 + p:first-line {
  font-variant: small-caps;
}

[color=#345286] 因为可能大部分日志/文章的第一个段落都会紧紧的在 h1 标签的后面。你可以在你的选择器中借助于 h1 标签。[/color]

[color=#345286][b]● 普通兄弟组合[/b][/color]
[color=#345286] 普通兄弟组合和临近兄弟组合的工作原理很像，不同的是[b]第二个选择器无需紧紧跟随第一个。[/b][/color]

[color=#345286] 如果你需要定位所有的某个特定的 div 里面并且跟在 h1 标签后面的 p 标签的话(你可能想要这些 p 标签比你的日志的标题前面的文字大些)，你就可以使用这个选择器：[/color]

.post h1 ~ p {
  font-size: 13px;
}

[color=#345286] 注：这两个选择器太像了，所有不是很好理解，可以试一试下面的这个例子：[/color]

p + h2 {
  color:red;
}

p ~ h2 {
  font-weight:700;
}

<p>咳咳，内容。</p>
<h2>标题1</h2>
<h2>标题2</h2>

[color=#345286] 看看第二个 h2 的颜色就可以理解了吧？临近兄弟组合只能匹配第一个选择器后面的第一个兄弟选择其，普通兄弟组合则能匹配所有。注：该部分英文原文没有，是神飞翻译时自己添加。[/color]

[color=#000000][b] [u]● 浏览器支持[/u][/b][/color]
[color=#345286] Internet Explorer 6 依然不能理解兄弟选择器，但是，另一种情况，如果你的用户中只有一小部分是 IE6 用户，而且网站的结构不会被破坏或者受到严重影响，这是实现很多很酷的效果而无需在你的 HTML 代码中添加无用的 class 或 id。[/color]

[color=#FF0000][b][size=medium]4、伪类[/size][/b][/color]
[color=#345286][b]● 动态伪类[/b][/color]
[color=#345286] 之所以被称为动态伪类是因为它们并不存在于 HTML 中，而是只有[b]当用户和网站交互的时候才会呈现。[/b][/color]

[color=#345286] 有两类动态伪类：[b]链接[/b]和[b]用户行为[/b]。链接就是: link 和 :visited，而用户行为包括 :hover、:active 和 :focus。[/color]

[color=#345286] 在本文中提到的 css 选择器中，这几个应该是最常用到的。[/color]

[color=#345286] [b]:link[/b] 伪类用于链接尚未被用户访问的时候，而 [b]:visited[/b] 伪类用于用户访问过的链接，也就是说它们是相反的。[/color]

[color=#345286] [b]:hover[/b] 伪类用于用户移动他们的鼠标在元素上，而尚未触发或点击它的时候。[b]:active[/b] 伪类应用于用户点击元素的情况。最后，[b]:focus[/b] 伪类用于元素成为焦点的时候——最常用于表单元素。[/color]

[color=#345286] 你可以在你的样式表中使用多种用户行为动态伪类，这样你就可以，比如，根据用户的鼠标只是滑过或悬停的时候，为一个输入框定义不同的背景色：[/color]

input:focus {
  background: #D2D2D2;
  border: 1px solid #5E5E5E;
}

input:focus:hover {
  background: #C7C7C7;
}

[color=#000000][b] [u]● 浏览器兼容性[/u][/b][/color]
[color=#345286] 动态伪类被所有的现代浏览器支持，甚至 IE6，但是请注意，对于 IE 系列浏览器来说，IE6 只允许 [b]:hover[/b] 伪类应用于链接元素(a 标签)而且只有 IE8 接受 [b]:active[/b] 状态。[/color]

[color=#345286][b]● :first-child[/b][/color]
[color=#345286] [b]:first-child[/b] 伪类允许你定位某个元素[b]第一个子元素。[/b]比如，如果你想给你的无序列表的第一个 li 添加一个 margin-top，你就可以这样写：[/color]

ul li:first-child {
  margin-top: 10px;
}

[color=#345286] 让我们来看一看另一个例子：比如你想让你的博客的侧栏的 h2 标签都有个顶部边距，以将标题和它们前面的内容区分开来，但是第一个 h2 不需要，你就可以使用下面的代码：[/color]

#sidebar h2 {
  margin-top: 10px;
}

#sidebar h2:first-child {
  margin-top: 0;
}

[color=#000000][b] [u]● 浏览器兼容性[/u][/b][/color]
[color=#345286] IE6 不支持 [b]:first-child[/b] 伪类。根据伪类应用到的设计的不同，它或许不会成为关注的主要问题。比如，如果你使用 [b]:first-child[/b] 选择器来移除标题或段落上的头部或底部的间距，你的布局在IE6中不会坏掉，它只会看起来有些不同。但是如果你使用 [b]:first-child[/b] 选择器从一个，比如浮动元素，移除左边距或右边距，将会让你的设计乱掉。[/color]

[color=#345286][b]● 语言伪类[/b][/color]
[color=#345286] [b]:lang()[/b]，允许你匹配一个基于它的语言的元素。[/color]

[color=#345286] 比如，你想让你的网站的某个特定的链接根据页面的语言有不同的背景颜色：[/color]

:lang(en) a#flag {
  background-image: url(english.gif);
}

:lang(fr) a#flag {
  background-image: url(french.gif);
}

[color=#345286] 这个选择器将会匹配相关的链接。如果页面的语言等于 "en" 或 "fr"，或者以"en" 或 "fr" 开头并在后面带个连字符 "-" 的话。[/color]

[color=#000000][b] [u]● 浏览器兼容性[/u][/b][/color]
[color=#345286] 不幸的是，IE 浏览器中只有 IE8 支持该选择器，其它的主要浏览器都支持该伪类选择器。[/color]

[color=#FF0000][b][size=medium]5、CSS 3 伪类[/size][/b][/color]
[color=#345286][b]● :target[/b][/color]
[color=#345286] 当你使用锚点(片段标识符 fragment identifier)的时候，比如，http://www.smashingmagazine.com/2009/08/02/bauhaus-ninety-years-of-inspiration/#comments，这 "#comments" 就是一个片段标识符，你就可以使用 [b]:target[/b] 伪类来控制目标的样式。[/color]

[color=#345286] 举个例子，比如你有一个很长的使用了很多文字和 h2 标题的页面，然后在页面的头部有一个对这些标题的索引。如果在点击索引内的某个链接时，相应的标题以某种方式高亮，然后滚动到相应的位置，对读者就会很有用。很简单。[/color]

h2:target {
  background: #F2EBD6;
}

[color=#000000][b] [u]● 浏览器兼容性[/u][/b][/color]
[color=#345286] 这一次，IE 浏览器完全不支持 :target 伪类，另一个小问题就是 Opera 在使用前进和后退按钮时不支持该选择器。但是其它的各个主流浏览器都支持该选择器。[/color]

[color=#345286][b]● UI 元素状态伪类[/b][/color]
[color=#345286] 有些 HTML 元素有 enable 或 disabled 状态(比如，文本输入框)和 checked 或 unchecked 状态(单选按钮和复选框)。这些状态就可以使用 [b]:enabled[/b]、[b]:disabled[/b] 或 [b]:checked[/b] 伪类来分别定位。[/color]

[color=#345286] 那么你就会想，如果任意一个禁用的(disabled)文本框应该使用浅灰色的背景和虚线边框：[/color]

input:disabled {
  border:1px dotted #999;
  background:#F2F2F2;
}

[color=#345286] 你也可能会想让所有选中的复选框有个左边距(这样就可以在众多的复选框中很容易认出来)：[/color]

input[type=”checkbox”]:checked {
  margin-left: 15px;
}

[color=#000000][b] [u]● 浏览器兼容性[/u][/b][/color]
[color=#345286] 所有的主流浏览器，除了我们常常不报希望的 IE 系列浏览器，都支持 UI 元素状态伪类。如果你考虑只是[b]添加附加级别的细节[/b]和增强网站的可用性，这个仍然是可以采用的。[/color]

[color=#FF0000][b][size=medium]6、CSS 3 结构伪类[/size][/b][/color]
[color=#345286][b]● :nth-child[/b][/color]
[color=#345286] :nth-child() 伪类允许你[b]定位某个上级元素的一个或多个特定的子元素。[/b][/color]

[color=#345286] 你可以通过定义它的值(为一个[b]整数[/b])来定位某个单个子元素：[/color]

ul li:nth-child(3) {
  color: red;
}

[color=#345286] 这将会让 ul 元素的第三个 li 元素的文字变成红色。注意如果在 ul 里面有个其它类型的元素(不是 li)，它也会算作其子元素。[/color]

[color=#345286] 你可以[b]使用表达式[/b]来定位子元素。比如，下面的表达式将从第四个开始匹配每第三个元素：[/color]

ul li:nth-child(3n+4) {
  color: yellow;
}

[color=#345286] 在上面的这个例子中，第一个黄色的 li 元素将会是第四个。如果也想从第一个开始匹配，你可以使用一个简单的表达式：[/color]

ul li:nth-child(3n) {
  color: yellow;
}

[color=#345286] 这样的话，第一个黄色的 li 元素将会是第三个子元素，然后是它后面的每隔第三个。现在想象一下如果你只想匹配列表中的[b]前四个[/b]子元素：[/color]

ul li:nth-child(-n+4) {
  color: green;
}

[color=#345286] :nth-child 的值同样也可以被定义为 "even" 或 "odd"，和 "2n" (第偶数个) 或 "2n+1" (第奇数个)的效果是一样的。[/color]

[color=#345286][b]● :nth-last-child[/b][/color]
[color=#345286] :nth-last-child 伪类基本上和 :nth-child 伪类的作用相同，但是它[b]从最后一个元素开始算。[/b][/color]

[color=#345286] 使用上面的一个例子来看看：[/color]

ul li:nth-child(-n+4) {
  color: green;
}

[color=#345286] 不是匹配最前面的四个 li 元素，该选择器匹配最后面的四个元素。[/color]

[color=#345286] 你同样可以使用 "even" 或 "odd"，同样与 nth-child 不同的是，这是从最后面的元素开始算的：[/color]

ul li:nth-last-child(odd) {
  color: grey;
}

[color=#345286][b]● :nth-of-type[/b][/color]
[color=#345286] :nth-of-type 伪类和 :nth-child 也很像，不同的是它只计算选择器中指定的那个元素。[/color]

[color=#345286] 这对定位元素中包含大量不同的元素的情况会很有用。比如，我们想控制一个文本块中的每隔一个段落，但是我们又想要无视其它元素比如图片和引用块：[/color]

p:nth-of-type(even) {
  color: blue;
}

[color=#345286] 你也可以使用一些值，就像在 :nth-child 中使用的一样。[/color]

[color=#345286][b]● :nth-last-of-type[/b][/color]
[color=#345286] 你能猜到它么？！:nth-last-of-type 伪类可以[b]像前面提到的 :nth-last-child 一样使用[/b]，但是这次，它将之匹配你在选择器中指定的元素类型：[/color]

ul li:nth-last-of-type(-n+4) {
  color: green;
}

[color=#345286] 我们可以更加的聪明一些，在一个大的块级选择器中[b]结合多种这样的伪类[/b]。比如想让文章中的所有的图片左浮动，除了第一个和最后一个(可以假设他们是满宽的，无须浮动)：[/color]

.post img:nth-of-type(n+2):nth-last-of-type(n+2) {
  float: left;
}

[color=#345286] 所以在这个选择器的第一部分，我们从第二个图片开始定位每一个图片。在第二部分中，我们定位所有的图片，除了最后一个。因为这两个选择器并非互斥的，我们可以同时使用它们，这样就可以一下子排除第一个和最后一个元素！[/color]

[color=#345286][b]● :last-child[/b][/color]
[color=#345286] :last-child 伪类的作用类似于 :first-child 伪类，但是会定位[b]父级元素的最后一个子元素[/b]。[/color]

[color=#345286] 假设你不想让你的日志的 div 的最后一个段落也有一个底部边距：[/color]

.post > p:last-child {
  margin-bottom: 0;
}

[color=#345286] 该选择器将定位 class 为 "post" 的元素的最后一个直接子级段落。[/color]

[color=#345286][b]● :first-of-type 和 :last-of-type[/b][/color]
[color=#345286] :first-of-type 伪类用于定位一个[b]上级元素下的第一个同类子元素[/b]。[/color]

[color=#345286] 比如，你可以定位某个特定的 div 的第一个子级段落(p)，并让其第一行字母大写:[/color]

.post p:first-of-type:first-line {
  font-variant: small-caps;
}

[color=#345286] 在这个选择器中，你可以确定你是在只定位 class 为 "post" 的元素的直接子级 p 元素，而且还是匹配第一个子级 p 元素。[/color]
[color=#345286] :last-of-type 伪类与此类似，只是匹配最后一个子元素。[/color]

[color=#345286][b]● :only-child[/b][/color]
[color=#345286] :only-child 伪类表示一个元素是它的父级元素的[b]唯一一个子元素[/b]。[/color]

[color=#345286] 比如说，你有一些盒子("news")，里面有一些文字段落，当你有多于一个段落的时候，你想让文字比只有一个段落的时候小一些：[/color]

div.news > p {
  font-size: 1.2em;
}

div.news > p:only-child {
  font-size: 1.5em;
}

[color=#345286] 第一个选择器中，我们定义 "news" div 的所有子级 p 元素的字体大小。在第二个中，我们覆盖之前的字体大小，如果该 p 元素是 "news" div 的唯一子元素的时候，它的字体大小会比较大一些。[/color]

[color=#345286][b]● :only-of-type[/b][/color]
[color=#345286] :only-of-type 伪类表示一个元素是[b]它的上级元素的唯一一个相同类型的子元素[/b]。[/color]

[color=#345286] 这有用什么用？假设你有一些日志，每一篇都有个 class 为 "post" 的 div，他们中的一些有多于一张图片，但是有些可能就只有一张图片。你想让后者中的图片水平居中，而在其它的有多于一张图片的日志中，就将它左浮动。这个需求用这个选择器就很容易实现：[/color]

.post > img {
  float: left;
}

.post > img:only-of-type {
  float: none;
  margin: auto;
}

[color=#345286][b]● :empty[/b][/color]
[color=#345286] :empty 伪类表示[b]一个元素里面没有任何内容[/b]。[/color]

[color=#345286] 这个选择器可以用很多种用途。比如，你在你的 "sidebar" 中有若干个盒子，但是不想让空盒子显示出来：[/color]

#sidebar .box:empty {
  display: none;
}

[color=#345286] 注意，就算 "box" div 里面只有一个空格，它也不会被 css 当作空标签的，这样就不能匹配该选择器了。[/color]

[color=#000000][b] [u]● 浏览器支持[/u][/b][/color]
[color=#345286] Internet Explorer(直到 8.0 版本)都不支持结构伪类。Firefox、Safari 和 Opera 在其最新版本的浏览器中支持这些选择器。这意味着，使用这些选择器对网站的可用性和可访问性是很有用的，或者如果网站的用户中的大部分是使用 IE 而且你不想在某些细节上无视他们，最好还是保持使用通用的 class 和简单的选择器来迎合这些选择器。否则你会被搞疯的！[/color]

[color=#FF0000][b][size=medium]7、否定选择器[/size][/b][/color]
[color=#345286] 否定选择器 [b]:not()[/b]，可以让你定位[b]不匹配[/b]该选择器的元素。[/color]

[color=#345286] 比如，如果你需要定义表单元素中的 input 元素，但是又不想包括 submit 类型的 input 的时候会灰常有用——你想它们有不同的样式，以看起来像按钮：[/color]

input:not([type="submit"]) {
  width: 200px;
  padding: 3px;
  border: 1px solid #000000;
}

[color=#345286] 另一个例子，你想你的日志的 div 中的所有段落(p)有比较大的字体，除了表示时间和日期的段落：[/color]

.post p:not(.date) {
  font-size: 13px;
}

[color=#345286] 你可以想象这个选择器能带给你的潜力了吧，你能够从你的 CSS 文件中剥离(剔除)的无用的大量选择器也被它广泛支持吗？[/color]

[color=#000000][b] [u]● 浏览器支持[/u][/b][/color]
[color=#345286] Internet Explorer 在这里常常是让我们感到扫兴的东西：一点都不支持，甚至在 IE8 中。这大概意味着这些选择器将仍不得不等到一些开发者开始不再顾虑将它添加到他们的样式表中才会普及。[/color]

[color=#FF0000][b][size=medium]8、伪元素[/size][/b][/color]
[color=#345286] 伪元素允许你操作 [B]HTML 中不是真实存在的元素[/B]，比如一个文本块的第一行或者第一个字母。[/color]

[color=#345286] 伪元素在 CSS 2.1 中就已经存在，但是 CSS 3 说明书表示他们应该使用双冒号 ::，以与伪类区分开来。在 CSS 2.1 中，他们也是使用单个冒号 : 的。浏览器会将能够接受两种格式，除非这些伪元素只存在于 CSS3 中。[/color]

[color=#345286][b]● ::first-line[/b][/color]
[color=#345286] ::first-line 伪元素将匹配 block、inline-block、table-caption、table-cell 等等级别元素的[b]第一行[/b]。[/color]

[color=#345286] 这对在你的文字块上添加[b]一些微妙的排版细节[/b]相当有用，比如，将一片文章的第一行文字改成小写字母：[/color]

h1 + p::first-line {
  font-variant: small-caps;
}

[color=#345286] 如果你专心的阅读了我们前面的内容，你将会了解到上面的语法意味着，紧紧的跟在 h1 标签之后(+)的段落会将其第一行文字显示为小写字母。[/color]

[color=#345286] 你也可以针对相关的 div 的第一行，而不用针对实际的段落标签(p)：[/color]

div.post p::first-line {
  font-variant: small-caps;
}

[color=#345286] 或者更进一步，定位某个特定的 div 的第一个段落的第一行：[/color]

div.post p:first-child::first-line {
  font-variant: small-caps;
}

[color=#345286] 这里，">" 符号表示你指定的是 post div 的直接子级元素，这样如果段落被包括在第二级 div 中，它就不会匹配这个选择器。[/color]

[color=#345286][b]● ::first-letter[/b][/color]
[color=#345286] ::first-letter 伪元素将会匹配一个文本块的[b]第一个字母[/b]，除非在同一行里面包含一些其它元素，比如图片。[/color]

[color=#345286] 和 ::first-line 伪类一样，::first-letter 通常用于给文本元素[b]添加排版细节[/b]，比如下沉字母或首字母。[/color]

[color=#345286] 这里是如何使用 ::first-letter 伪元素创建[b]首字下沉[/b]的例子：[/color]

p {
  font-size: 12px;
}

p::first-letter {
  font-size: 24px;
  float: left;
}

[color=#345286] 注意如果你在某些元素中同时使用 ::first-line 和 ::first-letter，::first-letter 属性将覆盖从 ::first-line 中继承下来的某些属性。[/color]

[color=#345286] 如果你不知道 W3C 规则的话，这个元素有时会产生意想不到的结果：它事实上是使用最长的规则的选择器！所以如果你计划使用它的话[b]最好仔细的阅读一下[/b](其它选择器也一样)。[/color]

[color=#345286][b]● ::before 和 ::after[/b][/color]
[color=#345286] ::before 和::after 伪元素用于在一个元素的前面或后面[b]插入内容[/b]，纯 CSS 方法。[/color]

[color=#345286] 这些元素将继承它们将附加的元素的大部分属性。[/color]

[color=#345286] 假设你想在你的页面中的图标的描述前面添加文字 "Graphic number x:"。你将无需写文字 "Graphic number"，或者自己手动添加数字：[/color]

.post {
counter-reset: image;
}

p.description::before {
  content: "Figure number " counter(image) ": ";
  counter-increment: image;
}

[color=#345286] 那么这会产生什么？[/color]

[color=#345286] 首先，我们告诉 HTML 来[b]创建 "image" 计数器[/b]。比如我们可以添加该属性到页面的 body。同样我们也可以给该计数器起任何一个名字，只要你想，只要我们常常使用同样的名字引用它：自己试试吧！[/color]

[color=#345286] 那么我们想在 class 为 "description" 的每一个段落之前添加这一块内容: "Figure number " — 注意只有我们在引号里面写的内容才会被创建到页面中，所以我们也要添加一个空格！[/color]

[color=#345286] 然后，我们就有了 counter(image)：这将用到我们之前在 .post 选择器中定义的属性。它默认会从数字 1 开始。[/color]

[color=#345286] 下一个属性在那里表示计数器知道对于每一个 p.description，它需要将 image 计数器增加 1 (counter-increment: image)。[/color]

[color=#345286] 它并不像看起来的那么复杂，而且还会非常的有用。[/color]

[color=#345286] ::before 和::after 伪元素常常只[b]使用 content 属性[/b]，来添加一些短语或排版元素，但是这里我们展示了我们如果以一种更加强大的结合 counter-reset 和 counter-increment 属性的方式来使用它们。[/color]

[color=#345286] [b]有趣的是[/b]：::first-line 和 ::first-letter 伪元素可以匹配使用 ::before 伪元素生成的内容，如果存在的话。[/color]

[color=#000000][b] [u]● 浏览器支持[/u][/b][/color]
[color=#345286] 如果使用单个冒号的话(比如, :first-letter, 而不是::first-letter)，这些伪元素被 IE8 支持(但是不被 IE7 或 IE6 支持)。但是左右其他的主流浏览器都支持这些选择器。[/color]

[color=#FF0000][b][size=medium]结语[/size][/b][/color]
[color=#345286] 乏味的讲述终于结束了，现在该你来领悟本文的要义并自己尝试了：开始通过创建实验性的页面并测试所有的这些选择器，在有疑问的时候返回这里并确保总是遵循 W3C 的规则，但是请不要只是坐在那里想这些选择器尚未被完全支持你就无视它们。[/color]

[color=#345286] 如果你[b]敢于冒险[/b]，或者你不害怕放弃之前的遍地无用和非语义化的 class 和 id，为什么不尝试一两个这些强大的 CSS 选择器到你的下一个项目中呢？我们保证你不会回头的！[/color]

[color=#FF0000][b][size=medium]参考[/size][/b][/color]
[list]
[*] [url=http://www.w3.org/TR/CSS2/selector.html][b]CSS 2 Selectors — W3C[/b][/url]
[*] [url=http://www.w3.org/TR/css3-selectors/][b]CSS 3 Selectors Level 3 — W3C[/b][/url]
[*] [url=http://en.wikipedia.org/wiki/Comparison_of_layout_engines_%28Cascading_Style_Sheets%29][b]Comparison of layout engines (Cascading Style Sheets) — Wikipedia[/b][/url]
[*] [url=http://www.w3.org/TR/CSS2/selector.html][b]Generated content, automatic numbering, and lists — W3C[/b][/url]
[/list]
[color=#FF0000][b][size=medium]扩展资源[/size][/b][/color]
[list]
[*] [url=http://www.alistapart.com/articles/keepelementskidsinlinewithoffspring/][b]Keeping Your Elements’ Kids in Line with Offspring — A List Apart[/b][/url]
[*] [url=http://css.maxdesign.com.au/selectutorial/index.htm][b]Selectutorial – CSS selectors[/b][/url]
[*] [url=http://inspectelement.com/tutorials/a-look-at-some-of-the-new-selectors-introduced-in-css3/][b]A Look at Some of the New Selectors Introduced in CSS3[/b][/url]
[*] [color=#345286]CSS 2.1 selectors, [/color][url=http://www.456bereastreet.com/archive/200509/css_21_selectors_part_1/][b]Part 1[/b][/url] [color=#345286]and[/color] [url=http://www.456bereastreet.com/archive/200510/css_21_selectors_part_2/][b]Part 2[/b][/url]
[*] [url=http://www.456bereastreet.com/archive/200601/css_3_selectors_explained/][b]CSS 3 selectors explained[/b][/url]
[*] [url=http://kimblim.dk/css-tests/selectors/][b]CSS selectors and pseudo selectors browser compatibility[/b][/url]
[*] [url=http://www.impressivewebs.com/10-useful-css-properties-not-supported-by-internet-explorer/][b]10 Useful CSS Properties Not Supported By Internet Explorer[/b][/url]
[*] [url=http://webdesignernotebook.com/css/styling-a-poem-with-advanced-css-selectors/][b]Styling a Poem with Advanced CSS Selectors[/b][/url]
[/list]