CSS伪类:匹配元素之 *-of-type
本帖最后由 马黑黑 于 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>
小辣椒就先学习一下，基本看不懂 小辣椒 发表于 2022-10-25 22:24
小辣椒就先学习一下，基本看不懂
这个系列的知识点非常有用，这是CSS强大的地方之一 马黑黑 发表于 2022-10-25 22:26
这个系列的知识点非常有用，这是CSS强大的地方之一
好的，我抽空上来看看，学习学习，现在我也是特别事情多，主要手机看不能记录，要电脑看，手机白天有空就上来回几个帖 小辣椒 发表于 2022-10-25 22:29
好的，我抽空上来看看，学习学习，现在我也是特别事情多，主要手机看不能记录，要电脑看，手机白天有空就 ...
前阵子你用百度查过伪元素 马黑黑 发表于 2022-10-25 22:36
前阵子你用百度查过伪元素
我老百度{:4_189:} 小辣椒 发表于 2022-10-25 22:37
我老百度
百度一下，懂一点 这个好，可以批量设置呢，很方便{:4_187:} 红影 发表于 2022-10-25 22:54
这个好，可以批量设置呢，很方便
对，匹配，批量 马黑黑 发表于 2022-10-25 23:33
对，匹配，批量
感谢黑黑带来这么多实用帖{:4_187:} 红影 发表于 2022-10-26 16:57
感谢黑黑带来这么多实用帖
{:4_190:} 马黑黑 发表于 2022-10-26 20:32
这段时间有点忙，只是看了个大概，等忙过了，再认真学习{:4_187:} 红影 发表于 2022-10-27 21:11
这段时间有点忙，只是看了个大概，等忙过了，再认真学习
没事，随意的 马黑黑 发表于 2022-10-27 21:16
没事，随意的
学习是必须的，否则会很多看不懂。 红影 发表于 2022-10-27 22:27
学习是必须的，否则会很多看不懂。
学不完的，漏一点也没关系{:4_170:} 马黑黑 发表于 2022-10-27 22:31
学不完的，漏一点也没关系
会尽力学习的，对自己是收获。 红影 发表于 2022-10-28 20:37
会尽力学习的，对自己是收获。
也好 马黑黑 发表于 2022-10-28 21:37
也好
肯定是好事的啊{:4_173:} 红影 发表于 2022-10-28 23:04
肯定是好事的啊
好事多多益善 马黑黑 发表于 2022-10-28 23:04
好事多多益善
多了也压力，心理有压力，身体就会失调。下午躺了一下午，感觉牙齿有点发炎。这个时候，体温绝对不能升高，否则所有的事都会被耽误。唉。