这两个CSS选择器之间的区别

Question

选择器div.red > p和div.red p之间有什么区别？

请指出这些CSS选择器之间的主要区别。

HTML

<div class="red"><p></p><div class="blue"><p></p></div>

第一个选择器是否只选择第一个<p>元素？

Answer 1

div > p

这将只选择p

的子元素div元素

div p

这将选择p

的所有后代（即儿童，儿童的孩子等）div元素

有关详细信息，请参阅here。

Answer 2

最简单的解释方法就是制作一个简单的DEMO。

<强> HTML

<div id="id">
    <p>First text</p>
    <div>
        <p>Second text</p>
    </div>
</div>

<强> CSS

div#id > p { background: red; }
div#id p { color: green; }

只有第一个文字有红色背景，因为>只接受p的直接子项div#id。第二个不匹配，因为div和div#id之间还有另一个p。

但是，它们都是绿色的，因为无论文档对象模型有多深，div#id p都匹配p后代的所有div#id。

Answer 3

第一个选择器显示“所有p标记，它们是div的直接子标记”。第二个是“p内的所有div个标签，无论他们是否是儿童，孙子”等等。

Answer 4

考虑以下HTML：

<div>
    <p>1</p>
    <p>
        <p>2</p>
        <p>3</p>
    </p>
    <p>4</p>
</div>
<p>5</p>

div > p只会选择直接后代：1,4和嵌套了p个元素的后代。

div p将选择div中的所有p标签：1 2 3 4。