Question

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

第一个网址（Google）是div的子女。
第二个网址（Bing）只是div的后代。

使用子选择器意味着只有Google网址应为红色。

但在实施过程中，两者 Google和Bing网址都是红色的。（另外，有趣的是，当我删除<h1>Text</h1>元素时，只有Google网址标记为红色。）

是什么原因？

以下是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代码段已转换为此内容（据我所知，忽略了结束</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>或类似代码），您最希望获得的内容。

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

1 个答案: