CSS选择器进阶：精准定位首个不含特定类名的元素

1. first-of-type:not(.class)的局限性

在CSS布局中，我们经常会遇到需要选择“第一个不包含特定类名的元素”的场景。直观上，许多开发者可能会尝试使用:first-of-type:not(.class)这样的组合选择器。然而，这种方法往往无法达到预期效果，尤其是在目标元素类型内部，第一个元素恰好包含了被排除的类名时。

例如，考虑以下HTML结构和SCSS代码：

HTML 示例：

NameGPT名称生成器

免费AI公司名称生成器，AI在线生成企业名称，注册公司名称起名大全。

0

查看详情

<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会选择第一个<div class='circle banned'></div>元素。由于这个元素同时包含了.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结构中，第八个<div class='circle'></div>元素满足这个条件，因为它紧邻在第七个<div class='circle banned'></div>之后，且自身不含.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; /* 重置回默认颜色 */
}

解释：

1. 第一条规则 .banned + .circle:not(.banned) 会选中所有紧邻在.banned元素之后且不含.banned类的.circle元素，并将其背景色设置为yellowgreen。在上述HTML中，这将同时影响第三个和第七个.circle元素。
2. 第二条规则 .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样式。

以上就是CSS选择器进阶：精准定位首个不含特定类名的元素的详细内容，更多请关注php中文网其它相关文章！