本文深入探讨了在CSS/SCSS中如何精确选择“首个不含特定类名的元素”这一常见需求。针对first-of-type:not(.class)选择器在复杂场景下的局限性，文章详细介绍了利用相邻兄弟选择器（+）和通用兄弟选择器（~）的组合方案，以实现更灵活和准确的元素定位。
1. first-of-type:not(.class)的局限性
在CSS布局中，我们经常会遇到需要选择“第一个不包含特定类名的元素”的场景。直观上，许多开发者可能会尝试使用:first-of-type:not(.class)这样的组合选择器。然而，这种方法往往无法达到预期效果，尤其是在目标元素类型内部，第一个元素恰好包含了被排除的类名时。
例如，考虑以下HTML结构和SCSS代码：
HTML 示例：
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 示例：
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. 方案二：混合排列中首个“非禁用”元素的定位（高级技巧）
如果“禁用”和“非禁用”元素是混合排列的，并且我们只希望选择在任何“禁用”元素之后出现的第一个“非禁用”元素，而忽略后续可能出现的其他符合条件的“非禁用”元素，这时就需要一个更高级的“选择-重置”技巧。
场景描述：
在这个例子中，.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样式。
以上就是CSS选择器进阶：精准定位首个不含特定类名的元素的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1577341.html
微信扫一扫 
支付宝扫一扫 
