CSS :has()选择器完全指南

CSS :has()选择器完全指南

引言

CSS:has()选择器是CSS选择器级别4引入的一项革命性特性，它允许我们根据元素的子元素或后续兄弟元素来选择元素。这是CSS历史上第一次真正实现了"父选择器"的功能。本文将深入探讨:has()选择器的各种用法和实战技巧。

:has()基础

什么是:has()

:has()是一个伪类选择器，它允许我们选择包含特定子元素或后续兄弟元素的父元素。

基本语法

/* 选择包含特定子元素的父元素 */ parent:has(> child) { /* 样式 */ } /* 选择包含特定后续兄弟元素的元素 */ element:has(+ sibling) { /* 样式 */ }

浏览器兼容性

:has()选择器详解

1. 选择包含特定子元素的父元素

/* 选择包含img子元素的div */ div:has(> img) { border: 2px solid blue; } /* 选择包含直接子元素p的article */ article:has(> p) { padding: 20px; } /* 选择包含任何层级子元素span的section */ section:has(span) { background: #f0f0f0; }

2. 选择包含特定后代元素的元素

/* 选择包含button后代的form */ form:has(button) { background: #f8fafc; } /* 选择包含.active类后代的nav */ nav:has(.active) { border-bottom: 2px solid #3b82f6; }

3. 选择包含特定后续兄弟元素的元素

/* 选择后面紧跟p元素的h2 */ h2:has(+ p) { margin-bottom: 10px; } /* 选择后面紧跟.active类元素的li */ li:has(+ .active) { border-right: 2px solid #ddd; }

4. 组合选择器

/* 选择包含img且包含figcaption的figure */ figure:has(img):has(figcaption) { border: 1px solid #eee; padding: 10px; } /* 选择包含input[type="text"]或input[type="email"]的form */ form:has(input[type="text"], input[type="email"]) { max-width: 500px; }

实战案例

案例1：表单验证样式

/* 当输入框有错误时，高亮标签 */ .form-group:has(input:invalid) label { color: #ef4444; } /* 当输入框有错误时，高亮整个表单组 */ .form-group:has(input:invalid) { border-color: #ef4444; background: rgba(239, 68, 68, 0.05); } /* 当输入框获得焦点时，添加聚焦效果 */ .form-group:has(input:focus) { box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); }

案例2：导航栏样式

/* 当导航项有.active类时，高亮父级导航 */ nav:has(.active) { background: rgba(59, 130, 246, 0.1); } /* 当导航项有.active类时，添加指示器 */ nav:has(.active)::before { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, #3b82f6, #8b5cf6); }

案例3：卡片布局

/* 选择包含图片的卡片 */ .card:has(img) { display: flex; gap: 16px; } /* 选择没有图片的卡片 */ .card:not(:has(img)) { text-align: center; } /* 选择包含视频的卡片 */ .card:has(video) { aspect-ratio: 16/9; }

案例4：列表样式

/* 选择包含复选框的列表项 */ li:has(input[type="checkbox"]) { display: flex; align-items: center; gap: 8px; } /* 选择被选中的列表项 */ li:has(input[type="checkbox"]:checked) { text-decoration: line-through; color: #9ca3af; } /* 选择包含未选中复选框的列表项 */ li:has(input[type="checkbox"]:not(:checked)) { font-weight: 500; }

案例5：表格样式

/* 选择包含选中复选框的行 */ tr:has(input[type="checkbox"]:checked) { background: rgba(59, 130, 246, 0.1); } /* 选择包含disabled输入框的单元格 */ td:has(input:disabled) { opacity: 0.5; cursor: not-allowed; }

:has()与其他选择器组合

1. :has() + :not()

/* 选择不包含img的article */ article:not(:has(img)) { padding: 20px; } /* 选择不包含.active类的nav */ nav:not(:has(.active)) { background: #f8fafc; }

2. :has() + :first-child / :last-child

/* 选择第一个包含p的section */ section:has(p):first-child { margin-top: 0; } /* 选择最后一个包含button的div */ div:has(button):last-child { margin-bottom: 0; }

3. :has() + 属性选择器

/* 选择包含带有required属性输入框的表单组 */ .form-group:has(input[required]) { position: relative; } /* 添加必填标记 */ .form-group:has(input[required]) label::after { content: '*'; color: #ef4444; margin-left: 4px; }

4. :has() + 伪元素

/* 当卡片包含图片时，添加遮罩层 */ .card:has(img)::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 50%, rgba(0,0,0,0.5)); }

动态效果

悬停效果

/* 当子元素被悬停时，高亮父元素 */ .card:has(.card-content:hover) { transform: scale(1.02); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); } /* 当按钮被悬停时，改变容器样式 */ .container:has(.btn:hover) { background: rgba(59, 130, 246, 0.05); }

焦点效果

/* 当输入框获得焦点时，高亮表单组 */ .form-group:has(input:focus) { border-color: #3b82f6; } /* 当文本域获得焦点时，扩大容器 */ .textarea-wrapper:has(textarea:focus) { transform: scale(1.02); }

动画效果

/* 当包含.active类时添加动画 */ .tabs:has(.tab.active) { animation: highlight 0.3s ease; } @keyframes highlight { from { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4); } to { box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); } }

性能注意事项

避免过度使用

/* 避免：性能开销大 */ *:has(span) { /* 样式 */ } /* 建议：限定范围 */ .container:has(span) { /* 样式 */ }

避免复杂嵌套

/* 避免：复杂嵌套 */ div:has(p:has(span:has(a))) { /* 样式 */ } /* 建议：简化选择器 */ div:has(p span a) { /* 样式 */ }

渐进增强

降级方案

/* 基础样式（所有浏览器） */ .card { padding: 16px; border: 1px solid #eee; } /* :has()增强（现代浏览器） */ @supports selector(:has(*)) { .card:has(img) { display: flex; gap: 16px; } }

实用技巧

1. 表单验证

/* 必填字段高亮 */ .form-group:has(input[required]) { border-left: 3px solid #ef4444; } /* 无效字段提示 */ .form-group:has(input:invalid:not(:placeholder-shown)) { border-color: #ef4444; } /* 有效字段提示 */ .form-group:has(input:valid) { border-color: #22c55e; }

2. 动态菜单

/* 下拉菜单展开时的样式 */ .menu:has(.dropdown[aria-expanded="true"]) { background: white; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); } /* 菜单有子菜单时的样式 */ .menu-item:has(.submenu) { position: relative; } .menu-item:has(.submenu)::after { content: '›'; margin-left: 4px; }

3. 图片画廊

/* 包含图片的画廊项 */ .gallery-item:has(img) { aspect-ratio: 1; overflow: hidden; } /* 包含视频的画廊项 */ .gallery-item:has(video) { aspect-ratio: 16/9; } /* 空的画廊项 */ .gallery-item:not(:has(img)):not(:has(video)) { display: flex; align-items: center; justify-content: center; background: #f8fafc; }

总结

CSS:has()选择器是CSS的一项重大突破，它终于实现了开发者们长期以来渴望的"父选择器"功能。通过本文的学习，你应该掌握了：

1. 基础用法：选择包含特定子元素的父元素
2. 组合使用：与其他选择器组合创造强大效果
3. 实战案例：表单验证、导航栏、卡片布局等
4. 性能优化：避免过度使用和复杂嵌套
5. 渐进增强：提供降级方案

核心要点：

• 使用:has(> child)选择直接子元素
• 使用:has(+ sibling)选择后续兄弟元素
• 使用:has(descendant)选择后代元素
• 配合@supports进行渐进增强
• 注意性能问题，避免过度使用

掌握:has()选择器后，你可以创造出更加灵活和强大的CSS样式，让你的网页更加动态和智能。