这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
  • Opera

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

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。这样的话第一个和最后一个元素并不需要这么设置区分分割线。 我们会通过给第一个和最后一个元素添加样式来解决。稍后我会给到示例。

浏览器兼容性

  • IE9+
  • 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个选择最好的办法就是经常的使用,在实际中去理解和运用,印象才能深刻。

举报

扫码关注云+社区

领取腾讯云代金券