是否有"全包兄弟"CSS选择器这样的东西？

Question

我的HTML:

<p>Doggies</p>
<p class="green_guys">Froggies</p>
<p>Cupcakes</p>
<p>Piggies</p>

一个全包的兄弟选择器(我希望它),当用于选择green_guys的兄弟姐妹时,会选择狗狗蛋糕和猪.

其他选择器:

该+选择器(又名相邻兄弟选择器)将仅选择蛋糕:

.green_guys + p {
    /* selects the <p> element that immediately follows .green_guys */
}

该~选择器(又名一般兄弟选择)将只能选择蛋糕,和小猪:

.green_guys ~ p {
    /* selects all <p> elements that follow .green_guys */
}

Answer 1

没有兄弟组合器向后或向左看,只有向前看的相邻和一般兄弟组合器.

您可以做的最好的事情是确定一种方法,仅限于选择p具有相同父项的这些元素,然后选择所有p子项:not(.green_guys).#parent例如,如果父元素的ID为,则可以使用此选择器:

#parent > p:not(.green_guys) {
    /* selects all <p> children of #parent that are not .green_guys */
}

但是,p即使它们都没有类,上面的内容仍然会匹配您的元素.目前不可能仅在存在所述元素的情况下选择元素的兄弟元素(这是兄弟组合子的目的 - 在两个兄弟元素之间建立关系).

选择器4:has()将有希望在不需要前兄弟组合器的情况下纠正这个问题,从而产生以下解决方案:

p:has(~ .green_guys), .green_guys ~ p {
    /* selects all <p> elements that are siblings of .green_guys */
}

如果父元素的子元素都没有该类,则这将不匹配任何内容.