CSS伪类:匹配元素之 *-of-type

马黑黑 · 发表于 2022-10-25 21:27

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由马黑黑于 2022-10-25 21:33 编辑

很多应用场景下，我们需要匹配符合一定条件的元素。考虑一下如下情形：

<div id="pa">
      <h1>标题一</h1>
      <span>小标题1</span>
      <span>小标题2</span>
      <span>小标题3</span>
      <span>小标题4</span>
      <span>小标题5</span>
      <h1>标题二</h1>
      <span>小标题6</span>
</div>

我们想让小标题都分行、加粗，然后奇数标题用蓝色、偶数标题用红色，怎么做？是不是要一个一个去设置、或给每一个span标签一个class标志？这倒是有效的实现方法，不过，如果处理很多很多的span标签，那会很麻烦。所以，*-of-type 伪类出现，它能很好地解决问题。请看：

我们先定义 #pa 选择器下所有的span标签都是块级元素、文本粗体、前景色红色：

#pa > span { display: block; font-weight: bold; color: red; }

接着，我们用 *-of-type(参数) 定义奇数的span前景色为蓝色：

#pa > span:nth-of-type(odd) { color: blue; }

分析一下上行代码：

① #pa > span 指定 #pa 父元素下的直系子元素 span ；
② span:nth-of-type 指定伪类元素为 span 元素的伪类；
③ nth-of-type 指定某种类型选择器的伪元素
④ nth-of-type(odd)  指定顺序为奇数的某选择器的伪元素（偶数是 even）

⑤ #pa > span:nth-of-type(odd) 定义的伪类属于 #pa 选择器下所有直系 span 标签中顺序为奇数的，如第一、三、五个span标签。

HTML代码中，<h1>标题一</h1> 和 <h1>标题二</h1> 不会受到任何影响，这是因为，:nth-of-type 定义的是冒号前的类型选择器，本例针对的是 span标签，还可以是其他的，比如 p 、 div 、img 等等元素标签。

*-of-type 还有常用到的 first-of-type 和 last-of-type，例如我们想匹配 #pa 选择器下的第一个 span 标签，令其前景色为橄榄色：

#pa > span:first-of-type { color: olive; }

我们还想让最后一个 h1 拥有浅蓝色的背景：

#pa > h1:last-of-type { background: lightblue; }

【提示】如果省略 *-of-type 的父元素，例如不要 #pa，那么，顺序为奇数的 span 标签就变成这样：

span:nth-of-type(odd) {
      color: blue;
}

这是针对整个 DOM 的 span 标签：只要它们拥有父元素（body也可以做它们的父元素），不论父元素是什么，那么，该父元素之下，span出现的顺序为奇数的，就都会匹配。所以，设置的时候，如果不想影响文档的其他 span 标签，给出它们的父元素是明智的做法。

最后整合一下CSS代码，效果请自行体验：

<style>

#pa {
      /* ... */
}

#pa>span {
      display: block;
      font-weight: bold;
      color: red;
}

#pa>span:nth-of-type(odd) {
      color: blue;
}

#pa>span:first-of-type {
      color: olive;
}

#pa>h1:last-of-type {
      color: olive;
}

</style>

<div id="pa">
      <h1>标题一</h1>
      <span>小标题1</span>
      <span>小标题2</span>
      <span>小标题3</span>
      <span>小标题4</span>
      <span>小标题5</span>
      <h1>标题二</h1>
      <span>小标题6</span>
</div>