26. X:first-child

:first-child伪类用于匹配一个序列的第一个元素。我们经常用它来实现一个序列的第一个元素或最后一个元素的上（下）边框，如：

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

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

27. X:last-child

ul > li:last-child {
      border-bottom:none;
  }
与:first-child类似，它匹配的是序列中的最后一个元素。

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

28. X:only-child

div p:only-child {
      color: red;
   }
这个伪类用的比较少。在上面例子中匹配的是div下有且仅有一个的p，也就是说，如果div内有多个p，将不匹配。

<div><p> My paragraph here. </p></div>

<div>
      <p> Two paragraphs total. </p>
      <p> Two paragraphs total. </p>
</div>
在上面代码中第一个div中的段落p将会被匹配，而第二个div中的p则不会。

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

29. X:only-of-type

li:only-of-type {
      font-weight: bold;
   }

这个伪类匹配的是，在它上级容器下只有它一个子元素，它没有邻居元素。例如上面代码匹配仅有一个列表项的列表元素。

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

30. X:first-of-type

:first-of-type伪类与:nth-of-type(1)效果相同，匹配出现的第一个元素。我们来看个例子：

<div>
      <p> My paragraph here. </p>
      <ul>
         <li> List Item 1 </li>
         <li> List Item 2 </li>
      </ul>
      <ul>
         <li> List Item 3 </li>
         <li> List Item 4 </li>
      </ul>
  </div>

在上面的html代码中，如果我们希望仅匹配List Item 2列表项该如何做呢：

方案一：

ul:first-of-type > li:nth-child(2) {
      font-weight: bold;
  }

方案二：

p + ul li:last-child {
      font-weight: bold;
   }

方案三：

ul:first-of-type li:nth-last-child(1) {
      font-weight: bold;
   }

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