有没有这样的事情作为一个“全包兄弟”CSS选择器?

前端之家收集整理的这篇文章主要介绍了有没有这样的事情作为一个“全包兄弟”CSS选择器?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我的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 */
}

〜选择器(a.k.a.一般兄弟选择器)只选择纸杯蛋糕,猪仔:

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

解决方法

没有兄弟的组合器看起来向后或周围,只有相邻和一般的兄弟组合器,期待。

最好的做法是确定一种方法,以限制选择只有这些p元素与同一父,然后选择p的子元素:not(.green_guys)。如果父元素的ID为#parent,例如,您可以使用此选择器:

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

然而,上面的仍然会匹配你的p元素,即使他们没有类。目前不可能仅仅在存在所述元素的情况下选择元素的兄弟元素(这是兄弟元组合器的目的 – 建立两个兄弟元素之间的关系)。

@L_403_0@将希望纠正这一点,而不需要前面的同级组合器,导致以下解决方案:

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

如果父元素的所有子元素都没有类,则不会匹配任何内容

猜你在找的CSS相关文章