Question

我的HTML：

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

一个全包的兄弟选择器（我希望如此），用于选择green_guys＆＃39;兄弟姐妹，会选择狗狗蛋糕和猪。

其他选择器：

+选择器（a.k.a。邻近兄弟选择器）只会选择纸杯蛋糕：

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

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

但是，即使 none 中有p个元素，上述内容仍会匹配您的p:has(~ .green_guys), .green_guys ~ p { /* selects all <p> elements that are siblings of .green_guys */ }元素。目前不可能仅在给定所述元素的存在的情况下选择元素的兄弟元素（这是兄弟组合的目的 - 在两个兄弟之间建立关系元件）。

希望

Selectors 4's :has()能够在不需要前兄弟组合子的情况下纠正这个问题，从而产生以下解决方案：

{{1}}

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

Answer 2

不是我知道的。也没有siblings选择器。

但这可能有用：

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

或者，如果您没有查找p个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;
}

它有效。

Answer 4

我实际上找到了三种方法：

解决方案1 

.parent > p:not(.green_guys) {
  text-decoration: line-through; /* or whatever you like */
}

演示： https://jsbin.com/cafipun/edit?html,css,output

PROS：快速简便。

缺点：您需要了解父选择器（因此这不是超级便携式的解决方案）。

解决方案2

p ~ p:not(.green_guys),
p:first-child:not(.green_guys) {
  text-decoration: line-through; /* or whatever you like */
}

演示： https://jsbin.com/seripuditu/edit?html,css,output

PROS：不需要知道父选择器（在一般情况下使用它会很好）。

缺点：可能过于笼统（例如，如果在HTML周围还有其他 p ，请小心！）。

解决方案3

解决方案2 的小版本（避免使用 CONS ）。在这种情况下，您可以指定兄弟选择器来获取更具体的上下文。

p.siblings ~ p:not(.green_guys),
p.siblings:first-child:not(.green_guys) {
  text-decoration: line-through; /* or whatever you like */
}

演示： https://jsbin.com/hakasek/edit?html,css,output

PROS：这是一个可移植的解决方案，无需知道父选择器（在一般情况下就非常有用），也不必担心与其他元素发生冲突。

缺点：所有兄弟姐妹必须定义良好（例如，使用类或属性）。

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

4 个答案: