CSS后代与子层次结构不起作用

Question

下面是一段简单的 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;
}

Answer 1

这有点棘手。

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

所以（在内部）你的 HTML sn-p 被转换为这个（据我所知，关闭 </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> 或类似标签）来实现您想要的。