🎯 选择示例
基础：包含img的卡片
.card:has(img) - 选中包含图片的卡片
表单：空输入框高亮
input:has(:placeholder-shown) - 选中空输入框
导航：当前页激活
li:has(a[aria-current]) - 选中当前页导航项
组合：悬停卡片效果
.card:has(.btn:hover) - 子按钮悬停时卡片变化
兄弟：标题后跟段落
h2:has(+ p) - 选中后面紧跟段落的标题
嵌套：深层匹配
.container:has(.active) - 选中含.active的容器
📝 CSS代码编辑器
👁️ 实时预览
这张卡片包含img标签
这张卡片没有img标签
也包含img标签
没有img但有其他内容
🌐 浏览器兼容性
全球支持率: 92%+ (2024)
📖 什么是CSS :has()选择器
CSS :has()选择器是CSS Selectors Level 4中引入的关系型伪类，被称为"CSS父选择器"。它允许你根据元素内部或后续兄弟元素的内容来选择元素，彻底改变了CSS只能从上到下选择的限制。
语法格式
:has(选择器列表) — 当元素匹配选择器列表中的任一选择器时，:has()伪类生效。
常用模式
- :has(子元素) — 选中包含特定子元素的父元素
- :has(+ 兄弟元素) — 选中后面紧跟特定兄弟元素的元素
- :has(~ 兄弟元素) — 选中后面有特定兄弟元素的元素
- :not(:has(子元素)) — 选中不包含特定子元素的元素
- :has(:hover) — 选中内部有悬停状态的元素
实际应用场景
- 卡片布局：包含图片的卡片自动调整样式
- 表单验证：空输入框高亮提示
- 导航菜单：当前页自动标记
- 暗黑模式：根据子元素状态切换
- 响应式：根据内容自适应布局
❓ 常见问题
什么是CSS :has()选择器？
:has()是CSS4新增的关系型伪类选择器，允许根据子元素或后续兄弟元素的存在来选择父元素。它被称为'父选择器'，是CSS中最受期待的功能之一。
:has()选择器的浏览器兼容性如何？
:has()选择器已被所有主流浏览器支持：Chrome 105+、Firefox 121+、Safari 15.4+、Edge 105+。全球浏览器支持率超过92%。
:has()和常规CSS选择器有什么区别？
常规CSS选择器是从上到下（父→子）选择，而:has()可以从下到上（子→父）选择。例如 .card:has(img) 可以选中包含img的.card元素，这在以前只能用JavaScript实现。
:has()选择器会影响性能吗？
简单场景下:has()性能很好。但复杂的:has()嵌套（如:has(:has())）或在大DOM树上使用可能影响渲染性能。建议避免深层嵌套，限制:has()中的选择器复杂度。
数据安全吗？
完全安全。所有CSS代码解析和预览在浏览器本地完成，不发送任何数据到服务器，不存储任何代码。关闭页面后数据自动清除。