Select CSS 中的任何兄弟姐妹

Question

我正在制作一个 AngularJS 组件，我想 select 标签的任何兄弟，无论它们是 div 还是 span或 p。我正在寻找 CSS 原生且类似于 div:siblings {color: red;} 的东西。到处都找不到。你知道它是否存在吗？

Answer 1

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

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

Answer 2

CSS 兄弟姐妹 select 或 ~ 和 + 只有 select 兄弟姐妹在特定元素之后.因此，如果您还想 select 前面的兄弟姐妹，那么这些就没有用了。

但是您可以做的一件事是 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>

第一条规则 select 是容器的所有直接子项（并设置它们的文本颜色），第二条规则 select 是同级其中 class (xxx) 和 将其颜色重置为默认值。这应该也可以使用其他参数。

Select CSS 中的任何兄弟姐妹

Select any sibling in CSS

html

css

css-selectors

angularjs