CSS子代选择器和后代选择器

Question

我有点困惑这两个选择器之间的区别。

后代选择器：

div p

如何选择所有在一个 div 下面的 p，无论它们是否是直接子元素？也就是说，如果这个 p 在另一个 div 中，它仍然会被选中吗？

接下来是 子元素 选择器：

div > p

有什么区别吗？child的意思是指直接的子元素吗？例如：

<div><p>

vs

->

对比

<div><div><p>

两个都会被选择，还是都不会被选择？

- iceangel89

---

我在这里尝试详细解释了一下，如果对任何人有帮助的话可以参考一下... 链接 - Mr. Alien

Answer 1

想一想英语中“child”和“descendant”的意思:

• 我女儿既是我的孩子也是我的后代
• 我的孙女不是我的孩子，但她是我的后代

- RichieHindle

---

一个重要的注意事项是，子选择器比后代选择器更快，这会在具有数千个DOM元素的页面上产生显著的影响。 - Jake Wilson

好的回答，但我会简单地补充一下直接回答问题中的示例，以使其非常清晰明了。 - JoeCool

Answer 2

是的，你说的对。 div p 会匹配以下示例，但 div > p 不会。

<div><table><tr><td><p> <!...

第一个被称为后代选择器，第二个被称为子元素选择器。

- Çağdaş Tekin

Answer 3

基本上，“a b”选择a内的所有b，而“a>b”选择作为a的唯一子项的b，它不会选择作为a的子项的b的子项b。

这个例子说明了差别：

div span{background:red}
div>span{background:green}

<div><span>abc</span><span>def<span>ghi</span></span></div>

abc和def的背景颜色将变为绿色，但ghi的背景颜色将是红色。

重要提示：如果您更改规则的顺序为：

div>span{background:green}
div span{background:red}

所有字母都将拥有红色背景，因为后代选择器会选择子元素。

- Ignas2526

---

你添加的“重要”部分使得这个答案更加完整。谢谢！ - Aakash Verma

Answer 4

理论上： Child => 祖先的直接后代（例如，乔和他的父亲）

Descendant => 任何由特定祖先所产生的元素（例如，乔和他的曾曾曾祖父）

实际上：试试这个 HTML：

<div class="one">
  <span>Span 1.
    <span>Span 2.</span>
  </span>
</div>

<div class="two">
  <span>Span 1.
    <span>Span 2.</span>
  </span>
</div>

使用这个CSS：

span { color: red; } 
div.one span { color: blue; } 
div.two > span { color: green; }

http://jsfiddle.net/X343c/1/

- Snowcrash

---

很有趣，你在哪个浏览器上测试过它？因为它似乎确实可以工作。 - yoel halb

FYI，答案中的CSS与JSFiddle中的CSS不匹配（red和blue被交换了）。 - Pang

Answer 5

请注意，子选择器在Internet Explorer 6中不受支持。 （如果您在jQuery / Prototype / YUI等选择器中使用该选择器而不是在样式表中使用，则仍然有效）

- rlovtang

---

我在考虑在CSS中使用它。但是在jQuery中，我需要检测浏览器是否为IE6（在jQuery中我可以这样做吗？还是需要使用<!--[if IE 6]>）并添加一个类。 - iceangel89

jQuery使用特性嗅探而不是浏览器嗅探，因此我认为您无法检测浏览器是否为ie6。而且您也不应该这样做。最好的方法是使用条件注释为ie6包含额外的样式表，就像您所描述的那样。 - rlovtang

Answer 6

div p

选择所有父元素为'div'元素的'p'元素，包括祖先元素。

div > p

它意味着只选择直接子元素，即选择所有父元素为'div'元素的子'p'元素。

- user3351229

Answer 7

所有选择器在可视化DOM树中的区别：

- Hemendr

Answer 8

div > p 匹配具有 div 父元素的 p 元素 - 在您的问题中是 <div><p>

div p 匹配具有 div 祖先元素（父元素、祖父元素、曾祖父元素等）的 p 元素 - 在您的问题中是 <div><p> 和 <div><div><p>

- user3071284

Answer 9

可以通过遍历DOM元素来选择并应用样式到特定的元素。

示例

.a .b .c .d{
    background: #bdbdbd;
}
div>div>div>div:last-child{
    background: red;
}

<div class='a'>The first paragraph.
 <div class='b'>The second paragraph.
  <div class='c'>The third paragraph.
   <div class='d'>The fourth paragraph.</div>
   <div class='e'>The fourth paragraph.</div>
  </div>
 </div>
</div>

- Aravind Cheekkallur