详解Css3中的属性选择符 (5)

:empty伪类

:empty伪类指向没有任何子元素的元素。其中包括text节点，因此下面的示例只有第一行是空元素。

<p></p>
<p>text</p>
<p><em></em></p>

下面的规则只匹配第一行的p元素：

p:empty { background:#ff0 }

:empty伪类目前被基于Mozilla的浏览器支持。Safari会错误地把样式应用到所有指定的元素中去。

否定伪类

否定伪类写成:not(s)，参数s为简单选择符。它指向的是除简单选择所指向的元素以外的所有元素。例如，下面的Css将会指向所有不是p的元素：

:not(p) { border:1px solid #ccc; }

否定伪类目前只有基于Mozilla的浏览器支持。

::selection伪类

::selection伪类匹配指定元素中处于选中或者高亮状态的部分。其中一个应用就是用它来控制选中文本的样式。

下面的规则会使选中的文本颜色变为红色：

::select { color:#f00; }

::selection伪类目前可能基于Safari的浏览器支持。但是在使用上会出现不可预料的情况，因此Safari还需要一点改进。基于 Mozilla的浏览器要使用-moz-prefix: ::-mozi-selection来实现。这种prefix可能最终会被去掉。

通用兄弟元素选择器

通用兄弟元素选择器通过两个简单选择符通过波浪号（~）分隔组成。它匹配第二个简单选择符中所匹配的元素，而且与第一个简单选择符中匹配的元素要出现在他的前面。这两个元素必须具有同一个父元素，但是第二个元素不一定必须紧跟在第一个元 素之后。这条Css规则将会匹配所有p元素之后ul元素：

p ~ ul { background:#ff0; }

通用兄弟元素选择器目前有Opera和基于Mozilla的浏览器支持。

亟需更好的浏览器支持

部分Css3选择符已经被广泛支持。但是，大部分非常有用的选择符在现代浏览器中或者未被支持或者使用受到限制。这就使得本文中介绍的很多选择符在今天的Web或多或少失去了用武之地。但是不必害怕去尝试它，你仍然可以在支持他们的带来超前体验的高级浏览器中使用他们。

[附件]Css3选择符在现在浏览器（Firefox 2、Firefox 3、InternetExplorer 7、Internet Explorer 8、Oper9.27）中的支持程度

Css3选择符	IE7	IE8	Firefox2	Firefox3	Opera9.27
E[foo^="bar"]	Y	Y	Y	Y	Y
E[foo$="bar"]	Y	Y	Y	Y	Y
E[foo*="bar"]	Y	Y	Y	Y	Y
E:root	N	N	Y	Y	Y
E:nth-child()	N	N	N	N	N
E:nth-last-child()	N	N	N	N	N
E:nth-of-type()	N	N	N	N	N
E:nth-last-of-type()	N	N	N	N	N
E:last-child	N	N	Y	Y	N
E:first-of-type	N	N	N	N	N
E:only-child	N	N	Y	Y	Y
E:only-of-type	N	N	N	N	N
E:empty	N	N	Y	Y	N
E:target	N	N	Y	Y	N
E:enabled	N	N	Y	Y	Y
E:disabled	N	N	Y	Y	Y
E:checked	N	N	N	N	Y
::selection	N	N	N	N	N
not()	N	N	Y	Y	Y
E ~ F	Y	Y	Y	Y	Y