是否有这样的事，作为一个“全包兄弟” 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 */
}

在~选择器（又名一般兄弟选择 ）将只能选择蛋糕，和小猪：

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

Answer 1:

有没有兄弟组合子，看起来向后或左右，只有期待相邻的和一般的兄弟组合程序。

你能做的最好是确定一个方法来限制只选择对这些p以相同的父元素，然后选择p孩子是:not(.green_guys) 如果父元素具有的ID #parent ，例如，你可以使用这个选择：

#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 */
}

如果没有父元素的孩子有类此将不匹配任何东西。

Answer 2:

这并不是说我知道。 有没有siblings选择器两种。

这可能会实现，但：

#parent_of_green_guys > p:not(.green_guys) {
  foo: bar;
}

或者，如果你是不是在找p s的class属性：

#parent_of_green_guys > p:not([class]) {
  foo: bar;
}

Answer 3:

我的情况有点不同，但我想选择一个输入元素的兄弟姐妹来显示一个，而这是积极的，另一个，如果有人离开无效。

我的HTML是这样的，我是无法选择无效的文本。

<input name="importantAnswer">
<div class="help-text"></div>
<div class="invalid-text"></div>

我能够在相邻的一个嵌入的兄弟姐妹和使用上的孩子选择绕过它。

<input name="importantAnswer">
<div class="messages">
   <div class="help-text"></div>
   <div class="invalid-text"></div>
</div>


.help-text, .invalid-text {
   visibility:hidden;
}

.input:active +.messages > .help-text {
   visibility:visible;
}

.input.invalid:visited +.messages > .invalid-text {
   visibility:visible;
}

和它的工作。

文章来源: Is there such a thing as an “all inclusive sibling” CSS selector?