html - 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

它们都不是“子选择器”； CSS中没有这样的概念。它们是不同的后代选择器，或者 descendant combinators因为它们在 Selectors Level 3 规范中被调用。它们的含义不同，所以要看使用目的。

选择器 div span匹配任何 span div 的后代元素元素。选择器div p span匹配任何 span p 的后代元素div 的后代元素元素。这两个选择器本身都是相当理论化的；如果没有一些额外的组件(例如类选择器)，它们在实际情况下几乎没有用。