选择CSS中的任何兄弟[重复]答案

【问题标题】：Select any sibling in CSS [duplicate]选择CSS中的任何兄弟[重复]
【发布时间】：2020-12-28 04:21:37
【问题描述】：

我正在制作一个 AngularJS 组件，并且我想选择标签的任何兄弟姐妹，无论它们是 divs 或 spans 还是 p。我正在寻找 CSS 原生的东西，例如 div:siblings {color: red;}。到处都找不到。你知道它是否存在吗？

【问题讨论】：

在 css 中，您可以通过选择器选择任何 next 兄弟姐妹：div ~ * 此处适用于您的情况。有关选择器的更多信息，请参阅developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors
添加这个以表明没有先前的兄弟选择器：stackoverflow.com/questions/1817792/…

标签： html css angularjs css-selectors

【解决方案1】：

CSS 兄弟选择器~ 和+ 仅选择特定元素之后的兄弟。因此，如果您还想选择前面的兄弟姐妹，这些将没有用。

但是您可以做的一件事是以下 CSS 规则的组合：

.container>* {
  color: red;
}
.xxx {
  color: initial;
}

<div class="container">
  <p>Some Text some Text</p>
  <div>Some Text some Text</div>
  <p>Some Text some Text</p>
  <p>Some Text some Text</p>
  <p class="xxx">This one has the class mentioned in the text</p>
  <p>Some Text some Text</p>
  <span>Some Text some Text</span>
</div>

第一条规则选择容器的所有 direct 子容器（并设置它们的文本颜色），第二条规则选择具有该类 (xxx) 和 重置其颜色为默认值。这也应该可以通过其他参数实现。

【讨论】：

【解决方案2】：

尝试像这样使用兄弟组合器

p.target ~ * {
   color: red;
}

<p>First paragraph</p>
<p class="target">Second paragraph</p>
<p>Third paragraph</p>
<p>Fourth paragraph</p>

您需要定位元素的第一个实例，以将样式应用于所有同级元素，如上例所示。

https://developer.mozilla.org/en-US/docs/Web/CSS/General_sibling_combinator

【讨论】：