Question

我试图理解为什么以下示例的行为不符合预期。我有一种选择一般兄弟姐妹的风格，但我也有孩子，我不希望被选中，但偶尔也会。这是一个说明问题的最小例子。第一个div>div.h是后代，~与之匹配。第二个p>div.h显然是后代，但~选择器与它匹配。我试过Chrome，Safari和Firefox，所有行为都一样。我肯定错过了什么。 p“特殊”吗？

<html>
  <head>
    <style>
      .anchor ~ .h { color: orange }
      .anchor2 ~ .h { color: blue }
    </style>
  </head>
  <body>
    <div>
      <div class="h">black 1</div>
      <div class="h">black 2</div>
      <p class="anchor">the anchor</p>
      <div class="h">orange 1</div>
      <div>
        <div class="h">should be black</div>
      </div>
      <p>
        <div class="h">why isn't this black</div>
      </p>
      <div class="h">orange 2</div>
      <p class="anchor2">anchor2</p>
      <div class="h">blue 1</div>
      <div class="h">blue 2</div>
    </div>
  </body>
</html>

Answer 1

<div> elements are not valid children of <p>.

您的浏览器会更正您的错误（将<div>移至<p>而不是div.h之后）并通过这样做，使.anchor成为.anchor ~ .h { color: orange } .anchor2 ~ .h { color: blue }的兄弟：

enter image description here

现在，如果您在段落中使用内联元素，浏览器不会更正您的标记并获得预期结果：

<div>
    <div class="h">black 1</div>
    <div class="h">black 2</div>
    <p class="anchor">the anchor</p>
    <div class="h">orange 1</div>
    <div>
        <span class="h">should be black</span>
    </div>
    <p>
        <span class="h">why isn't this black</span>
    </p>
    <div class="h">orange 2</div>
    <p class="anchor2">anchor2</p>
    <div class="h">blue 1</div>
    <div class="h">blue 2</div>
</div>

{{1}}

CSS通用兄弟组合器（即〜）

1 个答案: