css3选择器 伪类伪元素

CSS3选择器
在css3中新增了很多选择器，大部分浏览器都支持了，但是要知道坑爹的IE还在拖后腿，希望不久的将来IE能赶上来。

下面就介绍一下css3中都增加了哪些选择器。

1.属性选择器
E[attr] →有attr属性的E元素。

E[attr^=’value’] →寻找属性值以value开头的元素。

E[attr$=’value’] →寻找以属性值value结束的元素。

E[attr*=’value’] →寻找属性值包含value的元素。

灵活运用，可以组合使用，例如：
a[href^=’http://’][href*=’/folder2/’][href$=’.pdf’]{ }
E ~
F { } 相邻兄弟连接符，选择的是文档树的同一层级中，紧邻元素E之后的任意元素F。

E +
F { } 普通兄弟连接符，选择的是文档树的同一层级中，位于元素E之后的任意元素F，不管它是否直接相邻。

以上选择器大部分浏览器都支持，包括坑爹的IE。

2.伪类
E：first-child{ } //在css2引入，css3中增加11个新的结构伪类。

E：nth-child(n/2n/3n-1/odd/even){ }
E：nth-of-type(n/2n/3n-1/odd/even){ }
E：nth-last-child( ){ }和E：nth-last-of-type( ){ }与上面参数相同，但是元素要从最后一个算。

first-child{ }和:first-of-type{ } //选择其父元素的第一个子元素和其父元素的某种指定类型的第一个子元素。

last-child{ }和:last-of-type{ } //选择父元素的最后一个子元素和属于某种类型的最后一个子元素。

only-child和only-of-type，选择的是该元素有一个父元素，但没有任何的兄弟元素或者没有相同类型的兄弟元素。

例：p:only-of-type{ } p:only-child{ }
3.其它伪类
target伪类，指向网页内部特定元素的链接。

例：
<h4 id=”my_id”>Lorem ipsum</h4>
<a href=”/page.html#my_id”>Lorem</a>
Target伪类能够在涉及的URI被使用的时候，把样式应用到元素上。

#my_id:target{ }
其它例子.comment:target{ }
empty伪类，选择没有子元素（包括文本节点）的元素。

例：
<td>我</td><td></td><td>是</td>
td:empty{ } //只会应用到第二个td元素，因为其它两个包含有文本节点
root伪类，选择文档树中的第一个元素，它的唯一真正作用就是发生在为XML文档添
加样式表的时候，在HTML中，root永远是html元素，可以为html赋予更高的特殊度。

例：html:root{ }
not伪类，否定伪类在选择元素时，选择的是除了作为参数值给出的元素之外的所有元素。

E：not(F){ } //选择E元素的所有子元素，除了属于类型Ｆ的之外。

传入not伪类的参数必须是一个简单的选择器，所以连接符（比如+或者>)以及伪元素都不是有效的值。

例：div > :not(p){ } //给div的所有直接子元素加样式，除了p元素之外。

UI元素状态伪类
:checked{ }
:disabled{ }
:enabled{ }
例：input[type=’text’]:disabled{ }
4.伪元素
一共四个伪元素，css2中就已经存在，在css3中只是对原有定义稍微优化了一下。

这四个伪元素分别为::first-line{ }、::first-letter{ }、::after{ }、::before{ }。

在css3中伪元素的前缀使用的是双冒号，为了向后兼容，单冒号也可以被接受。

::selection{ } 可以将规则应用到用户在浏览器中选中的元素上（不是规范的一部分，但是部分浏览器已经实现了它）。

只有少数属性可以使用selection伪元素应用样式，分别是color、background-color和background简写属性。

例：
p::selection{ background-color:black;color:white; }
IE是唯一没有实现伪类选择器的浏览器。

本文由言小鱼（yanxiaoyu）首发于言小鱼个人博客。