1. 浅谈踩坑的 CSS 伪类选择器
1.1 :first-of-type
:first-of-type CSS伪类表示该类型在一组兄弟元素中的第一个元素。
- 示例1:
<style> .warpper:first-of-type { color: red; } </style> <div class="container"> <div class="warpper">123</div> <div class="warpper">123</div> <div class="warpper">123</div> </div>
- 示例1结果:
- 示例2(易踩坑):
<div class="container"> <div class="ever">111</div> <div class="warpper">222</div> <div class="warpper">333</div> <div class="warpper">444</div> </div>
- 容易踩坑的来了,如果按照
示例1
的写法,示例2
中没有一个元素会被选中,为什么呢? - 让我们再看一遍他的定义
选中在一组兄弟元素中的第一个元素
,定义很清晰,他始终说明的是元素
而非类名
。 - 所以我们来分析一下,
示例2
中第一个类名为 wrapper 的元素他是一个div
,那么它是这组兄弟元素中的第一个div
元素吗?很显然,它不是,所以他不会被选中。 - 那么,问题来了,如果在项目中出现了
示例2
的情况,我们该如何选中第一个类名为 wrapper 的元素呢? - 我们的需求是选中一组兄弟元素中的
第 2 个 div 元素
,并且他的类名为wrapper
,重点是什么元素,类名只是在元素上的一个附加条件,以下是可以正常选中的 CSS 样式
<style> .warpper:nth-of-type(2) { color: red; } </style>
- 当然我更推荐大家将 CSS 选择器写的更加清晰一点,可以写为:
请始终牢记,他对标的是元素是元素是元素!! <style> div.warpper:nth-of-type(2) { color: red; } </style>
- 容易踩坑的来了,如果按照