CSS3中31种选择器使用方法教程

#contaienr

 外的所有 

div

 元素，就可以用上面的代码实现。

兼容 IE9+

21. 

X::pseudoElement

p::first-line { font-weight: bold; font-size: 1.2em;}

通过伪元素（使用双冒号 

::

）可以给元素的某一部分设定样式，比如第一行、或者第一个字母。需要注意的是，这只对块级元素 (block level elements) 生效。

提示：伪元素 (pseudo element) 使用双冒号 

::

选取段落的第一个字母

p::first-letter { float: left; font-size: 2em; font-weight: bold; font-family: cursive; padding-right: 2px;}

这段代码将选取页面中所有 p 元素，然后再选取其中的第一个字母。

选取段落的第一行

p::first-line { font-weight: bold; font-size: 1.2em;}

与上面的例子类似，通过 

::first-line

 选取页面的第一行。

为了兼容 CSS1 与 CSS2 中的伪元素（比如 

:first-line

, 

:first-letter

, 

:before

 以及 

:after

），浏览器接受单冒号与双冒号两种格式，但对于 CSS3 中最新引入的伪元素，必须使用双冒号。

兼容 IE6+

22. 

X:nth-child(n)

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

:nth-child(n)

 用于选取 stack 中的某一个元素，只接受整数作参数（参数从 1 开始计数），如果你想选取第二个 li 元素，只需这样写 

li:nth-child(2)

。

也可以设定可变的参数，比如 

li:nth-child(4n)

 将选取第 4, 8 , 12… 个元素（4*n, n=1, n++）。

兼容 IE9+

23. 

X:nth-last-child(n)

li:nth-last-child(2) { color: red;}

除了正序（从上往下）选择，也可以使用 

:nth-last-child(n)

 倒序（从下往上）选择第几个元素，其他用法与第 22 条完全一样。

兼容 IE9+

24. 

X:nth-of-type(n)

ul:nth-of-type(3) { border: 1px solid black;}