1

下面是一段简单的 HTML/CSS 代码，我在其中输入了两个 URL：

  • 第一个 URL (Google) 是 div 的子级。
  • 第二个 URL (Bing) 只是 div 的后代。

使用子选择器意味着只有 Google URL 应该是红色的。

但在实施中，不知何故， Google 和 Bing URL 都是红色的。（另外，有趣的是，当我删除该<h1>Text</h1>元素时，只有 Google URL 是红色的。）

是什么原因？

这是 HTML 摘录：

<div class="mydiv">
    <a href="http://www.google.com">Google</a>
    <p>
        <h1>Text</h1>
        <a href="http://www.bing.com">Bing</a>
    </p>
</div>

和 CSS 提取：

.mydiv > a {
    color:red;
}
4

1 回答 1

5

这有点棘手。

首先<h1>是块元素。接下来要注意的是，它<p>只能包含内联元素。一旦遇到块元素作为元素的子<p>元素，打开的元素<p>就会隐式关闭。

所以（在内部）你的 HTML 片段被转换成这个（据我所知，关闭</p>被忽略）：

<div class="mydiv">
        <a href="http://www.google.com">Google</a>
        <p></p>
        <h1>Text</h1>
        <a href="http://www.bing.com">Bing</a>
</div>

现在，如您所见，两个<a>标签都是您的直接后代，<div>因此您的 CSS 规则适用于它们。

删除<h1>标签时的行为相应地如下：您<p>没有隐式关闭。因此，第二个<a>仍然是子级<p>，CSS 不适用于它。

我认为，你想要的最好使用另一个<div>而不是<p>标签来实现（甚至可能是<article>，<section>或类似的）。

于 2012-09-22T11:30:36.803 回答