如何解决在CSS中选择任何同级
我正在制作AngularJS组件,并且希望选择标签的任何同级,无论它们是div
还是span
还是p
。我正在寻找CSS本身的东西,例如div:siblings {color: red;}
。在任何地方都找不到。你知道它是否存在吗?
解决方法
尝试像这样使用同级组合器
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
, 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
)和将其颜色重置为默认颜色。使用其他参数也应该可以做到这一点。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。