本文深入探讨了在CSS/SCSS中如何精准定位满足特定条件（如“非首个”或“不包含某类”）的元素，尤其是在元素顺序和类名混合的复杂场景。文章解释了first-of-type的局限性，并重点介绍了如何利用相邻兄弟选择器（+）和通用兄弟选择器（~）组合not()伪类，以实现对HTML结构中特定元素的精确样式控制。
理解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结构：
如果使用.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结构示例：
在这个例子中，.banned + .circle:not(.banned)会匹配第一个紧跟在.banned元素后面的.circle元素，前提是这个.circle元素不包含.banned类。这解决了之前first-of-type无法处理的场景。
注意事项：
+选择器只匹配紧邻的下一个兄弟元素。如果.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结构示例：
解释：
.banned + .circle:not(.banned)：这个选择器会匹配所有紧跟在.banned元素后面的第一个非.banned的.circle元素。在上面的HTML中，它会匹配第三个.circle和第六个.circle，并将它们设置为yellowgreen。.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选择器高级应用：精准定位“非首个”或“特定条件”元素的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1577363.html
微信扫一扫 
支付宝扫一扫 
