21. X::pseudoElement

::伪类用于给元素片段添加样式。比如一个段落的第一个字母或者第一行。需要注意的是，这个::伪类只能用于块状元素。

下面的代码设定了段落中第一个字母的样式：

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

下面的代码中设定了段落中第一行的样式：

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

兼容浏览器：IE6+、Firefox、Chrome、Safari、Opera

（IE6竟然支持，有些意外啊。）

22. X:nth-child(n)

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

这个伪类用于设定一个序列元素（比如li、tr）中的第n个元素（从1开始算起）的样式。在上面例子中，设定第三个列表元素li的字体颜色为红色。

看一个更灵活的用法，在下面例子中设定第偶数个元素的样式，可以用它来实现隔行换色：

tr:nth-child(2n) {
      background-color: gray;
   }

兼容浏览器：IE9+、Firefox、Chrome、Safari

23. X:nth-last-child(n)

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

与X:nth-child(n)功能类似，不同的是它从一个序列的最后一个元素开始算起。上面例子中设定倒数第二个列表元素的字体颜色。

兼容浏览器：IE9+、Firefox、Chrome、Safari、Opera

24. X:nth-of-type(n)

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

与X:nth-child(n)功能类似，不同的是它匹配的不是某个序列元素，而是元素类型。例如上面的代码设置页面中出现的第三个无序列表ul的边框。

兼容浏览器：IE9+、Firefox、Chrome、Safari

25. X:nth-last-of-type(n)

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

与X:nth-of-type(n)功能类似，不同的是它从元素最后一次出现开始算起。上面例子中设定倒数第三个无序列表的边框

兼容浏览器：IE9+、Firefox、Chrome、Safari、Opera