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选择的元素是div span选择的元素的一部分。

如果您将<span>作为<div>的孩子，第二个会选择它，但第一个不会。如果您未将<span>作为<div>的子项，则会选择完全相同的元素。

例如：

<div>
    <span>Only the second selector will make this text red</span>

    <p>
        <span>Hello, world!</span>
    </p>
</div>

Answer 2

它们都不是“子选择器”; CSS中没有这样的概念。它们是不同的后代选择器，或{{3>}，因为它们在选择器级别3 规范中被调用。它们的含义是不同的，所以它取决于哪个更好的目的。

选择器div span匹配作为span元素后代的任何div元素。选择器div p span匹配任何span元素，该元素是p元素的后代，div元素是{{1}}元素的后代。这两个选择器都是理论上的;如果没有一些额外的组件，例如类选择器，它们在实际情况下几乎没用。

Answer 3

他们都会工作，但

div p span {
    font: 18px arial;
    color: red;
}

更正确，并且您不太可能遇到问题，例如当您决定在li中添加跨度以用于其他可能的目的时。

Answer 4

div > p > span {
 font: 18px arial;
 color: red;
}

Answer 5

第一种方法是正确的方法。样式只能跨越p标签内部，你可以在这个项目上给出/编辑/更改特定的样式......但是第二种方法的样式工作全部跨越div标签。

Answer 6

嗯，这实际上取决于背景。例如，这个选择器......

div p span

仅适用于作为span元素的子元素的所有p元素，而div元素又是<div> <span class="title">Title</span> <span class="desc">Description</span> <p> <span>Content</span> <p> </div>元素的子元素。考虑一下，这个HTML ......

div p span
{
    color:Blue;
}

以下css声明将以蓝色

为内容范围着色

但是样式不适用于标题和描述，因为它们不是div span { color:Blue; }元素的子元素。现在使用这个css声明...

span

会导致标题，说明和内容以蓝色显示，因为此选择器会定位嵌套在div元素中的所有div p span元素

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

div span

应该比

更快地执行

div

因为它会导致渲染引擎查找所有p元素，然后span元素忽略所有其他元素（包括直接子元素的span元素），最后它会＆＃39 ; ll寻找{{1}}元素

CSS子级选择器

6 个答案: