这30个CSS选择器，你必须熟记（下）

在上两篇文章里，《这30个CSS选择器，你必需熟记（上）》和 《这30个CSS选择器，你必需熟记（中）》这两篇文章里，我们一起学习了前20个，本篇文章我们一起学习剩下的10个选择器。

21、 X::pseudoElement 伪元素选择器

我们可以使用伪元素（用::表示）来定义某些片段元素，比如第一行或第一个字母。要记住的是这只能用于块状（block）元素。

比如我们要匹配第一个字母：

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）

浏览器兼容性

• IE6+
• Firefox
• Chrome
• Safari
• Opera

22、 X:nth-child(n) ：选择每第 n 个元素选择器

如果你要匹配一组序列元素每第几个元素，你可以使用 :nth-child 选择器满足这个需求，要注意的是nth-child指序列里的第n个元素，从1开始。如果你要匹配第二个元素，可以使用li:nth-child(2)。我们甚至可以用按倍数进行匹配，比如选择所有4的倍数元素，li:nth-child(4n)。我们常用这个做奇偶交替的样式，但是更常用的是这两个特殊的关键词字：even(偶数) 后 odd (奇数)

常用写法示例：

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

奇数样式匹配：

li:nth-child(odd) {
 background: red;
}

浏览器兼容性

• IE9+
• Firefox 3.5+
• Chrome
• Safari

23、 X:nth-last-child(n) ：从后往前计算选择每第 n 个元素选择器

X:nth-last-child(n) 与 X:nth-child(n) 相反，这里从后往前数，比如你的元素很多，你不会一个一个从前往后数吧，li:nth-child(397)，使用 nth-last-child 这个伪类更会方便些

代码示例：

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

浏览器兼容性

• IE9+
• Firefox 3.5+
• Chrome
• Safari
• Opera

24. X:nth-of-type(n)：选择每第n个某种元素选择器

有时候你可能有这样的需求，想通过元素类型type进行选择，而不是子元素 child，你可以考虑 X:nth-of-type(n)，假设有5个无序列表。如果你想定义第三个ul的样式，但又没有id来进行匹配，那么可以使用伪类nth-of-type(n)。你的代码可以这么写：

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

浏览器兼容性

• IE9+
• Firefox 3.5+
• Chrome
• Safari

25. X:nth-last-of-type(n)：从后往前计算选择每第n个某种元素选择器

比如我们可以使用nth-last-of-type来选择倒数第n个元素。如下段代码所示：

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

浏览器兼容性

• IE9+
• Firefox 3.5+
• Chrome
• Safari
• Opera

26. X:first-child：第一个子元素选择器

这个选择器通常选择第一个子元素，我们常常为第一个或者最后选项卡设置默认的视觉效果，比如去掉元素的边框，示例代码如下：

ul >li:first-child {
 border-top: none;
}

假设你有一个序列，每一行的元素都有上边框border-top和下边框border-bottom。这样的话第一个和最后一个元素并不需要这么设置区分分割线。我们会通过给第一个和最后一个元素添加样式来解决。稍后我会给到示例。

浏览器兼容性

• IE7+
• Firefox
• Chrome
• Safari
• Opera

27. X:last-child：最后一个子元素选择器

有第一个子元素选择器，自然会有最后一个子元素选择器，示例代码如下：

ul > li:last-child {
 color: green;
}

比如下面一个例子，我们创建一个无序列表的样式，需要加上边框的深度，让层次更明显（分割线），又不想让第一个元素上边框和最后一个元素下边框有线条的感觉，这两个伪类就派上用场了，示例代码如下：

<style>
ul {
 width: 200px;
 background: #292929;
 color: white;
 list-style: none;
 padding-left: 0;
}
 
li {
 padding: 10px;
 border-bottom: 1px solid black;
 border-top: 1px solid #3c3c3c;
}

li:first-child {
  border-top: none;
}
 
li:last-child {
 border-bottom: none;
}
</style>

<ul>
   <li> List Item </li>
   <li> List Item </li>
   <li> List Item </li>
</ul>

效果如下：

浏览器兼容性

• IE9+
• Firefox
• Chrome
• Safari
• Opera

28：X:only-child ：选择唯一的子元素

这个伪类一般不常用，only-child可以让你匹配唯一的子元素，比如，选择当div中只有一个p子元素的时候段落字体才是红色的，只要子元素超过一个就不会应用样式。示例代码如下：

<style>
div p:only-child {
 color: red;
}
</style>

<div><p> My paragraph here. </p></div> 
/*只有这行应用样式*/
 
<div>
 <p> Two paragraphs total. </p>
 <p> Two paragraphs total. </p>
</div>

浏览器兼容性

• IE9+
• Firefox
• Chrome
• Safari
• Opera

29：X:only-of-type：匹配父元素里没有邻近兄弟元素的选择器

only-of-type会匹配父元素里没有邻近兄弟元素的子元素（即同胞中唯一的那种元素，没有兄弟）。例如，匹配所有只有一个列表元素的 li 和 div里只有一个p标签 让其应用样式，示例代码如下

<style>
      div p:only-of-type {
         color: red;
      }

      li:only-of-type {
         font-weight: bold;
      }
</style>

<div>
   <p> My paragraph here. </p>
   <ul>
      <li> List Item </li>
      <li> List Item </li>
   </ul>
</div>

<div>
   <p> Two paragraphs total. </p>
   <p> Two paragraphs total. </p>
   <ul>
      <li> List Item </li>
   </ul>
</div>

示例效果如下：

浏览器兼容性

• IE9+
• Firefox 3.5+
• Chrome
• Safari
• Opera

30：X:first-of-type：选择该类型的第一个元素选择器

我们通常用这个选择器来选择该类型的第一个元素，为了更好的理解这个例子，我们来看如下结构的HTML代码：

<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>

比如我们有一个这样的需求? 怎么选中"List Item 2"。先别着急往下看？你会如何做呢？

实现的方法比较多，如下所示：

方案1

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

上述代码，首先找到页面中的第一个无序列表，然后找到它的直接子元素，然后选择第二个元素。

方案2 ：

使用紧邻同胞选择器

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

上述代码先找到紧跟在p后面的ul，然后找到li序列的最后的元素。

方案3：

多种选择器的组合，示例代码如下：

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

上述我们先找到页面的第一个ul，然后找到li序列的倒数第一个元素。

浏览器兼容性

• IE9+
• Firefox 3.5+
• Chrome
• Safari
• Opera

小节

到这里，我们终于学完了常用的30个CSS选择器，是不是轻松许多，感谢大家的阅读，熟记这30个选择最好的办法就是经常的使用，在实际中去理解和运用，印象才能深刻。