我的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 */ }
如果父元素的所有子元素都没有类,则不会匹配任何内容。