html - 这两个 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

这将选择 a 的所有后代（即孩子、孩子的孩子等）p元素div

请参阅此处了解更多信息。

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. 第二个不匹配，因为在anddiv之间还有另一个。div#idp

但是，它们都是绿色的，因为无论文档对象模型的深度如何，都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。