不理解CSS中的通用兄弟组合子(~)

mwg9r5ms 于 2023-02-10 发布在其他

关注(0)|答案(1)|浏览(123)

我正在学习不同的css选择器，在给出的例子中，我不明白为什么选择了div4，因为id div4不是div3的兄弟？因为对我来说它是一个孩子，但也许因为它只是div，我弄错了，或者是兄弟的定义错了？

<style>
    div ~ div{
        color: red;
    }
</style>
<div id="div1">
    div1
    <div id="div2">div2</div>
    <div id="div3">
        div3
        <div id="div4">div4</div>
        <div id="div5">div5</div>
    </div>
</div>

我希望只选择div3作为div2的兄弟，div5作为div4的兄弟。
有人能解释一下我错在哪里吗，或者为什么选择div4？

css

来源：https://stackoverflow.com/questions/75358839/not-understanding-the-general-sibling-combinator-in-css

1条答案

按热度按时间

q35jwt9p1#

这是因为css color属性是从父对象继承的。
https://developer.mozilla.org/en-US/docs/Web/CSS/color
继承是
https://developer.mozilla.org/en-US/docs/Web/CSS/inheritance
继承的属性，默认情况下设置为父元素的计算值
因此，您要处理的场景本身并不严格受限于兄弟选择器。
在这里可以看到，让该规则专门处理#div3将把该属性设置为继承的所有子属性：

#div3{
  color: red;             /*inherited .. applied also to descendants*/
  border: solid 1px blue; /*not inherited .. applies only to selected elements*/
}

<div id="div1">
  div1
  <div id="div2">div2</div>
  <div id="div3">
    div3
    <div id="div4">div4<span>[span further descendant]</span></div>
    <div id="div5">div5</div>
  </div>
</div>

展开查看全部

赞(0）回复(0）举报 2023-02-10

我来回答

不理解CSS中的通用兄弟组合子(~)

1条答案

相关问题

热门标签

最新问答