CSS选择器高级应用：精准定位“非首个”或“特定条件”元素

理解first-of-type的局限性

在CSS中，first-of-type伪类用于选择其父元素中相同类型元素的第一个。例如，div:first-of-type会选择其父元素下的第一个div元素。当尝试将其与not()伪类结合，例如&:first-of-type:not(.banned)（在SCSS中），期望选择“第一个不包含.banned类的同类型元素”时，往往会遇到不符合预期的情况。

其根本原因在于first-of-type首先评估元素类型，并选择该类型下的第一个元素，然后not(.banned)才对这个已选中的元素进行过滤。这意味着如果第一个circle元素本身就带有.banned类，那么&:first-of-type:not(.banned)将不会匹配任何元素，因为它首先匹配了第一个circle（即使它有.banned类），然后not(.banned)条件失败。它不会“跳过”第一个banned元素去寻找下一个非banned的同类型元素。

考虑以下HTML结构：

<div class='circle banned'></div>
<div class='circle banned'></div>
<div class='circle'></div> <!-- 期望样式应用于此元素 -->
<div class='circle'></div>

如果使用.circle:first-of-type:not(.banned)，它会尝试匹配第一个.circle元素。由于第一个.circle元素带有.banned类，not(.banned)条件不满足，因此没有任何元素会被选中。

立即学习“前端免费学习笔记（深入）”；

利用兄弟选择器实现精准定位

要实现“第一个不包含某类”的元素选择，尤其是当被排除的元素可能出现在目标元素之前时，我们需要借助CSS的兄弟选择器：相邻兄弟选择器（+）和通用兄弟选择器（~）。

1. 定位紧随特定元素后的第一个非特定元素

如果目标是选择紧随一个或多个特定元素（例如带有.banned类）之后出现的第一个非特定元素（例如不带.banned类的.circle），可以使用相邻兄弟选择器+。

CSS/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;
}

HTML结构示例：

<div class='circle banned'></div>
<div class='circle banned'></div>
<div class='circle'></div> <!-- 此元素将被着色为 yellowgreen -->
<div class='circle'></div>

在这个例子中，.banned + .circle:not(.banned)会匹配第一个紧跟在.banned元素后面的.circle元素，前提是这个.circle元素不包含.banned类。这解决了之前first-of-type无法处理的场景。

稿定AI绘图

稿定推出的AI绘画工具

36

查看详情

注意事项：

• +选择器只匹配紧邻的下一个兄弟元素。如果.banned元素后面跟着另一个.banned元素，然后才是.circle:not(.banned)，则此选择器不会匹配。
• 这种方法假定所有被排除的元素（.banned）都出现在我们想要选择的目标元素之前。

2. 处理混合排序的复杂场景

当banned和非banned元素混合排列，并且我们只想选择某个banned序列后的第一个非banned元素，同时不影响后续可能出现的其他非banned元素时，情况会更复杂。

如果你的目标是只高亮显示第一个满足“紧跟在.banned之后且自身不带.banned类”条件的元素，而后续同样满足条件的元素则保持默认样式，你需要更精细的控制。

CSS/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. 将后续所有“紧邻 .banned 之后且不带 .banned 类”的 .circle 元素重置为默认背景色
// 这是一个更复杂的场景，如果目标是只匹配第一个，需要覆盖后续匹配
// 实际上，如果只需要第一个，通常会用更精确的父子或结构选择器。
// 但如果必须使用兄弟选择器，并且希望后续的同类模式不被高亮，可以这样处理：
.banned + .circle:not(.banned) ~ .banned + .circle:not(.banned) {
  background-color: blue; /* 覆盖之前的 yellowgreen，恢复默认 */
}

HTML结构示例：

<div class='circle banned'></div>
<div class='circle banned'></div>
<div class='circle'></div> <!-- 此元素将被着色为 yellowgreen -->
<div class='circle'></div> <!-- 此元素将被重置为 blue -->
<div class='circle banned'></div>
<div class='circle'></div> <!-- 此元素将被着色为 yellowgreen -->
<div class='circle'></div> <!-- 此元素将被重置为 blue -->

解释：

1. .banned + .circle:not(.banned)：这个选择器会匹配所有紧跟在.banned元素后面的第一个非.banned的.circle元素。在上面的HTML中，它会匹配第三个.circle和第六个.circle，并将它们设置为yellowgreen。
2. .banned + .circle:not(.banned) ~ .banned + .circle:not(.banned)：这个选择器更加复杂。它首先找到一个符合banned + .circle:not(.banned)模式的元素，然后使用通用兄弟选择器~去寻找这个元素之后所有同样符合banned + .circle:not(.banned)模式的元素。通过将这些后续元素的背景色重置为blue，我们实际上实现了只高亮显示每个banned序列后的第一个非banned元素。

重要提示： 这种利用~选择器进行“覆盖”的方法，虽然能解决特定问题，但可能会增加CSS的复杂性和维护成本。在实际开发中，如果HTML结构允许，更推荐使用更具语义化的结构或JavaScript来处理这种“仅第一个”的复杂逻辑。

总结

在CSS中，理解不同选择器（尤其是伪类和兄弟选择器）的行为模式至关重要。first-of-type等结构性伪类是基于元素在DOM树中的位置和类型来匹配的，而not()伪类则是在已匹配元素的基础上进行过滤。当需要根据元素的类名和其兄弟元素的关系来选择特定元素时，相邻兄弟选择器（+）和通用兄弟选择器（~）结合not()伪类提供了强大的能力。然而，为了保持代码的清晰性和可维护性，应谨慎使用复杂的选择器组合，并在可能的情况下，优化HTML结构以简化CSS选择逻辑。

以上就是CSS选择器高级应用：精准定位“非首个”或“特定条件”元素的详细内容，更多请关注php中文网其它相关文章！