CSS :has选择器匹配含icon与span子元素的button样式问题求助

你的CSS代码不生效是因为用错了选择器符号：

• 你写的+是相邻兄弟选择器，只能匹配跟当前元素同级且紧挨着的元素，但icon和span是.mod的子元素，不是同级节点，所以这个选择器根本找不到目标元素。

正确的CSS写法 #

要匹配同时包含icon和span子元素的.mod按钮，直接用后代选择器即可：

.mod:has(icon, span) {
  padding-left: 1px;
}

如果需要严格匹配直接子元素（不包含嵌套在其他元素里的icon/span），可以用子选择器>：

.mod:has(> icon, > span) {
  padding-left: 1px;
}

额外提醒 #

1. 注意你的HTML里<span>标签没闭合，修正后才能保证结构正确：

<button class="mod">
  <icon></icon>
  <span></span>
</button>

2. :has()选择器目前在Chrome、Edge、Safari中正常支持，Firefox需要手动开启layout.css.has-selector.enabled配置项才能使用。

内容的提问来源于stack exchange，提问作者Picco