CSS 子子选择器

Question

以下两个代码似乎都可以正常工作来设置span元素的样式：

<style>
    div p span {
        font: 18px arial;
        color: red;
    }
</style>
<div>
    <p>
        <span>
            Hello, world!
        </span>
    </p>
</div>

<style>
    div span {
        font: 18px arial;
        color: red;
    }
</style>
<div>
    <p>
        <span>
            Hello, world!
        </span>
    </p>
</div>

但我不确定第二个编码是否正确，以及它们之间是否存在差异，例如在浏览器支持方面。

Answer 1

嗯，这确实取决于上下文。例如，这个选择器...

div p span

仅适用于span作为某个元素的子元素的所有元素p，而这些元素又是某个div元素的子元素。考虑一下，这个 html...

<div>
    <span class="title">Title</span>
    <span class="desc">Description</span>
    <p>
        <span>Content</span>
    <p>
</div>

以下 css 声明会将内容范围着色为蓝色

div p span
{
    color:Blue;
}

但是，样式不会应用于标题和描述，因为它们不是p元素的子元素。现在通过使用这个CSS声明...

div span
{
    color:Blue;
}

将导致标题、描述和内容都变为蓝色，因为此选择器针对span嵌套在div元素内的所有元素

至于性能，这很难确定，因为这完全取决于实现以及不同浏览器遍历 DOM 层次结构并应用样式的程度。但是，我猜想越具体越好，以便 HTML 解析器可以直接定位元素。考虑到这一点，这个 css 选择器...

div p span

应该执行得比

div span

因为它会导致渲染引擎查找所有div元素，然后p忽略所有其他元素（包括span直接子元素的元素），最后查找span元素