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

Question

下面是一段简单的HTML/CSS代码,我在其中放入了两个URL:

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

使用儿童选择器意味着只有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>或类似).