浅谈踩坑的 CSS 伪类选择器

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>