Question

我对这两个选择器感到有些困惑。

后代选择器：

div p

选择p内的所有div是否是直接后代？因此，如果p位于另一个div内，它仍然会被选中吗？

然后孩子选择器：

div > p

区别是什么？孩子是否意味着直接孩子？例如

<div><p>

VS

<div><div><p>

是否会被选中？

Answer 1

想想“孩子”和“后代”这个词在英语中的含义：

我的女儿既是我的孩子又是我的后代
我的孙女不是我的孩子，但她是我的后代。

Answer 2

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

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

第一个称为descendant selector，第二个称为child selector。

Answer 3

Bascailly，“ ab ”选择a中的所有b，而“ a＆gt; b ”选择 b的 b < em> a ，它不会选择 b b 的孩子什么是 a 的孩子。

这个例子说明了不同之处：

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}

所有字母都有红色背景，因为后代选择器也会选择孩子。

Answer 4

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

Answer 5

理论上： 儿童=＆gt;祖先的直系后裔（例如乔和他的父亲）

后代=＆gt;任何来自特定祖先的元素（例如乔和他的曾祖父）

在实践中：试试这个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/

Answer 6

div p

选择所有＆＃39; p＆＃39;父母是＆＃39; div＆＃39;元件

div > p

这意味着直接的孩子选择所有＆＃39; p＆＃39;父母是＆＃39; div＆＃39;元件

Answer 7

div > p与具有p父级的div匹配-您的问题中的<div><p>

div p与拥有p祖先（父母，祖父母，曾祖父母等）的div匹配-您问题中的<div><p>和<div><div><p>

Answer 8

CSS选择和将样式应用于特定元素可以通过遍历dom元素来完成 [实施例

Example

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

CSS Child vs Descendant选择器

8 个答案: