1. first-of-type:not(.class)的局限性
在CSS布局中，我们经常会遇到需要选择“第一个不包含特定类名的元素”的场景。直观上，许多开发者可能会尝试使用:first-of-type:not(.class)这样的组合选择器。然而，这种方法往往无法达到预期效果，尤其是在目标元素类型内部，第一个元素恰好包含了被排除的类名时。
例如，考虑以下HTML结构和SCSS代码：
HTML 示例：
<div class='circle banned'></div> <div class='circle banned'></div> <div class='circle banned'></div> <div class='circle'></div> <!-- 期望此元素被着色 --> <div class='circle'></div>
SCSS 尝试：
立即学习“前端免费学习笔记（深入）”；
.circle {
width: 30px;
height: 30px;
background-color: blue;
border-radius: 100%;
display: inline-block;
// 尝试选择第一个非.banned的.circle元素
&:first-of-type:not(.banned) {
background-color: yellowgreen;
}
}
.banned {
background-color: brown;
}问题分析：
first-of-type选择器的工作原理是选择其父元素下特定类型的第一个子元素。在这个例子中，div.circle:first-of-type会选择第一个
元素。由于这个元素同时包含了.banned类，所以not(.banned)条件不满足，因此整个选择器&:first-of-type:not(.banned)将不会匹配任何元素。它不会“跳过”第一个被禁用的元素去寻找下一个。为了实现更精确的条件选择，我们需要利用CSS的兄弟选择器。
2. 核心概念：CSS兄弟选择器
CSS提供了两种强大的兄弟选择器，它们允许我们根据元素与其同级元素之间的关系进行选择：
相邻兄弟选择器 (+)： A + B 会选择紧接在元素 A 之后的第一个同级元素 B。 例如：.banned + .circle 会选择紧接在.banned元素后面的第一个.circle元素。
通用兄弟选择器 (~)： A ~ B 会选择在元素 A 之后的所有同级元素 B。 例如：.banned ~ .circle 会选择在.banned元素之后的所有.circle元素。
这些选择器在处理基于前一个元素状态的条件选择时非常有用。
3. 方案一：定位连续“禁用”元素后的首个“非禁用”元素
当我们的HTML结构中，所有带有特定“禁用”类名的元素都连续排列在前面，后面紧跟着不带“禁用”类名的元素时，我们可以利用相邻兄弟选择器来精确地选择第一个“非禁用”元素。
场景描述：
假设有一系列.circle元素，其中前几个带有.banned类，而我们希望将第一个不带.banned类的.circle元素着色。
HTML 示例：
<div class='circle banned'></div> <div class='circle banned'></div> <div class='circle banned'></div> <div class='circle banned'></div> <div class='circle banned'></div> <div class='circle banned'></div> <div class='circle banned'></div> <div class='circle'></div> <!-- 期望此元素被着色为 yellowgreen --> <div class='circle'></div> <div class='circle'></div>
SCSS 解决方案：
body {
margin-top: 2rem;
text-align: center;
}
.circle {
width: 30px;
height: 30px;
background-color: blue; /* 默认颜色 */
border-radius: 100%;
display: inline-block;
}
.banned {
background-color: brown;
}
// 选择紧邻在一个.banned元素之后的、且不包含.banned类的.circle元素
.banned + .circle:not(.banned) {
background-color: yellowgreen;
}解释：
.banned + .circle:not(.banned) 选择器会找到所有紧跟在.banned元素后面，并且自身不带有.banned类的.circle元素。在上述HTML结构中，第八个
元素满足这个条件，因为它紧邻在第七个之后，且自身不含.banned类。4. 方案二：混合排列中首个“非禁用”元素的定位（高级技巧）
如果“禁用”和“非禁用”元素是混合排列的，并且我们只希望选择在任何“禁用”元素之后出现的第一个“非禁用”元素，而忽略后续可能出现的其他符合条件的“非禁用”元素，这时就需要一个更高级的“选择-重置”技巧。
场景描述：
<div class='circle banned'></div> <div class='circle banned'></div> <div class='circle'></div> <!-- 期望此元素被着色为 yellowgreen --> <div class='circle'></div> <div class='circle banned'></div> <div class='circle banned'></div> <div class='circle'></div> <!-- 此元素不应被着色 --> <div class='circle'></div>
在这个例子中，.banned + .circle:not(.banned) 会同时选中第一个和第二个符合条件的.circle元素。如果我们的目标是仅着色第一个，我们需要额外的规则。
SCSS 解决方案（利用“选择-重置”）：
body {
margin-top: 2rem;
text-align: center;
}
.circle {
width: 30px;
height: 30px;
background-color: blue; /* 默认颜色 */
border-radius: 100%;
display: inline-block;
}
.banned {
background-color: brown;
}
// 步骤1：为所有紧邻在.banned元素之后、且不包含.banned类的.circle元素应用特定样式
.banned + .circle:not(.banned) {
background-color: yellowgreen;
}
// 步骤2：使用通用兄弟选择器，选择所有“后续”的、符合相同条件的元素，并将其样式重置
// 这会覆盖掉步骤1中对这些后续元素的样式，从而只保留第一个被着色
.banned + .circle:not(.banned) ~
.banned + .circle:not(.banned) {
background-color: blue; /* 重置回默认颜色 */
}解释：
- 第一条规则 .banned + .circle:not(.banned) 会选中所有紧邻在.banned元素之后且不含.banned类的.circle元素，并将其背景色设置为yellowgreen。在上述HTML中，这将同时影响第三个和第七个.circle元素。
- 第二条规则 .banned + .circle:not(.banned) ~ .banned + .circle:not(.banned) 则更进一步。它会找到所有满足第一条规则的元素，然后使用通用兄弟选择器~，找到在该元素之后所有同样满足第一条规则的元素。对于这些“后续”元素，它将背景色重置回blue。这样，就只有第一个满足条件的元素会保留yellowgreen的背景色。
注意事项：
这种“选择-重置”的方法虽然能够实现目标，但相对复杂，且依赖于样式层叠和优先级。在实际开发中，如果DOM结构允许，更推荐使用语义化的HTML结构或JavaScript来处理这种复杂的“第一个符合条件”的选择。
5. 总结与注意事项
通过本文的探讨，我们可以得出以下关键点：
- first-of-type的精确语义：它只关心元素在同级元素中的类型顺序，而不考虑其是否包含其他类名。因此，first-of-type:not(.class)在“第一个同类型元素正好是class”的场景下无法生效。
- 兄弟选择器的强大作用：相邻兄弟选择器（+）和通用兄弟选择器（~）是实现基于元素前后关系进行条件选择的关键工具。它们使CSS能够处理更复杂的逻辑，超越了简单的父子或自身属性选择。
- 纯CSS的局限性：尽管CSS提供了强大的选择器，但在处理“第一个符合复杂条件的元素”这种需求时，尤其是在元素排列不规则的情况下，纯CSS解决方案可能会变得冗长和难以维护。
- 选择合适的策略：在实际项目中，应根据具体的DOM结构、性能考量和维护成本，选择最合适的CSS策略。对于极端复杂的动态场景，结合JavaScript进行元素选择和样式控制可能更为灵活高效。
理解这些高级选择器的原理和应用场景，将有助于开发者编写出更精确、更具表现力的CSS样式。
