0

是p div.myclass有效的 CSS 选择器吗？我想选择 div.myclass 但只有当它是 p 的后代时。

<body>
 <div class="myclass">Do not select</div>
  <p>
    <any>...
      <div class="myclass">Select this element to set background & border
        <any>Other stuff may be here</any>
      </div>
    </any>
   </p>
  </div> <!-- added this after question was answered -->
</body>
4

1 回答 1

5

这是一个有效的选择器，是的；但 adiv不是元素的有效子p元素。所以 CSS 是有效的，但是您应用该选择器的 HTML 是无效的。

顺便说一句，除了嵌套div在 中之外p，您还有一个未封闭div的包装p，其后是</body>标签。所以你的 HTML 是双重无效的，因为标签必须以打开它们的相反顺序关闭。

附录，正如评论中提出的（我本来不想费心添加这个，而是计划专注于 CSS 的语法），浏览器（当然是 Chromium 24/Ubuntu 12.10）在构建时“拯救”你的 HTML DOM，所以你从这里开始：

<p>
    <any>...
        <div class="myclass">Select this element to set background & border
            <any>Other stuff may be here</any>
        </div>
    </any>
</p>

对于一个看起来像这样的 DOM（同样，在 Chromium 24/Ubuntu 12.10 中）：

<p>
    <any>...</any>
</p>
<div class="myclass">Select this element to set background &amp; border
    <any>Other stuff may be here</any>
</div>
<p></p>

JS 小提琴演示。

因此，如果您遇到的问题以及您提出问题的原因是CSS 没有选择/设置元素样式，原因仅仅是因为您使用了无效的 HTML，并且浏览器在构建时更改了您的 HTML （有效的）DOM，这意味着选择器不再匹配您最初的目标。

这就是为什么应该遵循 HTML 有效性规则的原因，它使它更易于使用（无论是今天，还是将来您或其他人必须重新访问时）。

哦，最后，&字符也不应该直接在 HTML 中使用，它应该以某种方式编码，例如&amp;，因为该&字符是 HTML 字符实体代码中的第一个字符。所以...您创建了三重无效的 HTML。

于 2013-02-14T19:25:35.427 回答