在CSS开发中，我们常常需要精准定位特定的页面元素来添加样式，传统的:nth-child、:nth-of-type以及属性选择器虽然能实现基础定位，但在复杂嵌套结构或动态内容场景下，逻辑会变得十分繁琐，适配性也较差。而:has()和:not()两个现代CSS选择器的出现，为我们提供了更灵活的定位思路，能够替代传统方案实现更精准的元素匹配。
:has()和:not()的核心语法
:has()选择器
:has()是CSS中的关系选择器，用于选择包含特定子元素或后续兄弟元素的父元素，语法为选择器:has(匹配条件)，只有当元素内部存在符合匹配条件的子元素时，才会被选中。
:not()选择器
:not()是CSS中的否定伪类，用于排除符合特定条件的元素，语法为选择器:not(排除条件)，选中所有不符合排除条件的元素。
传统定位方案的不足
传统的:nth-child选择器依赖元素在父容器中的位置，一旦页面结构发生调整，比如新增或删除某个兄弟元素，样式就会失效。属性选择器则需要元素携带固定的属性值，无法适配动态生成的内容，也不支持基于子元素状态的反向选择。
比如我们需要给所有不包含禁用按钮的表单容器添加内边距，用传统方案很难直接实现，而用:has()和:not()就可以轻松完成。
实际场景代码示例
场景1：排除特定子元素的父容器
需求：给所有不包含disabled属性的提交按钮的form容器添加内边距，排除包含禁用按钮的表单。
/* 传统方案很难直接实现该需求 */
/* 使用:has()和:not()组合实现 */
form:not(:has(button[type="submit"][disabled])) {
padding: 20px;
border: 1px solid #e5e5e5;
border-radius: 8px;
}
场景2：替代nth-child实现动态定位
需求：给所有后面紧跟span标签的p元素添加下边距，不需要依赖p的位置序号。
/* 传统方案需要用nth-child判断位置，结构变化就失效 */
/* 使用:has()实现 */
p:has(+ span) {
margin-bottom: 16px;
color: #333;
}
场景3：组合使用实现复杂筛选
需求：给所有包含图片且不包含广告标记的div容器添加阴影效果。
div:has(img):not(.ad-container) {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
padding: 12px;
}
注意事项
:has()选择器的兼容性目前覆盖主流现代浏览器，如果需要适配旧版浏览器，需要做好降级处理。- 不要过度嵌套
:has()和:not()，避免选择器逻辑过于复杂，影响样式解析性能。 - 两个选择器可以和其他CSS选择器自由组合，根据实际需求灵活搭配即可。
合理运用:has()和:not()能够大幅简化CSS定位逻辑，减少冗余代码，提升样式的可维护性，是现代化CSS开发中的实用技巧。
CSShas_selectornot_selectornth_selector修改时间：2026-07-10 02:06:20