🎯 CSS :has()选择器生成器

快速模板

.card:has(img) 选择包含图片的卡片

input:invalid 样式化无效输入

.container:has(:empty) 空容器样式

h2:has(+ p) 选择后跟段落的标题

父元素选择器

内部条件选择器

应用样式

:has()是CSS4中的伪类选择器，允许根据子元素或后续兄弟元素的存在来选择父元素，被称为'父选择器'。例如 .card:has(img) 可以选择包含img元素的.card元素。

:has()选择器已被所有主流浏览器支持：Chrome 105+、Safari 15.4+、Firefox 121+、Edge 105+。全球支持率超过92%。

常见用法包括：1) 根据子元素样式化父元素；2) 表单验证样式；3) 空状态样式；4) 前一个兄弟选择；5) 响应式布局中根据内容调整。