use:必须接受属性中的两个元素

Question

我有这个HTML代码：

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

只有当按钮有两个子项时，我才需要将图标和跨度分开，类似于CSS:中的内容

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

但它不起作用。有人能帮我吗？

Answer 1

您可以使用直接子组合子(>(加
:first-child伪类加
兄弟组合子(+(

.container {
display: flex;
flex-direction: column;
align-items: flex-start;
row-gap: 1rem;
}
button {
display: block;
}
.btn:has(> :first-child + *) {
padding-left: 2rem;
}

<div class="container">
<button class="btn">
<span>1</span>
<span>2</span>
</button>
<button class="btn">
<span>1</span>
</button>
</div>

Answer 2

您可以链接多个:has()选择器：.mod:has(icon):has(span)

下面是一个工作示例：

.mod {
border: 0;
background-color: #CCC;
padding: 10px 20px;
border-radius: 5px;
}
.mod:has(icon):has(span) {
padding-left: 1px;
background-color: #C00;
color: #FFF;
}

<button class="mod">Lorem</button>
<button class="mod">  
Ipsum
<icon></icon>
<span></span>
</button>
<button class="mod">Dolor</button>

请注意，正如@MisterJojo在下面的评论中指出的那样，:has()选择器还没有在所有主要浏览器中得到完全支持。您可以在这里检查哪些浏览器支持它，以验证它是否覆盖了您所需的用户群。