CSS Child vs Descendant 选择器

Posted 2023-02-21

【中文标题】CSS Child vs Descendant 选择器

【英文标题】：CSS Child vs Descendant selectors

【发布时间】：2010-11-14 00:12:52

【问题描述】：

我对这两个选择器有点困惑。

descendent 选择器是否：

div p

选择div 中的所有p，无论它是否是直系后裔？那么如果p 在另一个div 中，它仍然会被选中吗？

然后是 child 选择器：

div > p

有什么区别？孩子是指直接的孩子吗？例如。

<div><p>

对

<div><div><p>

是否都被选中？

【问题讨论】：

我已经尝试详细解释here，如果对任何人有帮助，可以参考...

【参考方案1】：

div > p 匹配 ps 在您的问题中有 div 父级 - <div><p>

div p 匹配 ps 具有 div 祖先（父母、祖父母、曾祖父母等） - <div><p> 和 <div><div><p> 在您的问题

【参考方案2】：

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>

【参考方案3】：

理论上： Child => 祖先的直系后裔（例如 Joe 和他的父亲）

Descendant => 任何来自特定祖先的元素（例如 Joe 和他的曾曾祖父）

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

【讨论】：

有趣的是你在哪个浏览器上测试过它，因为它看起来确实可以工作

仅供参考，答案中的 CSS 与 JSFiddle 中的 CSS 不匹配（red 和 blue 已交换）。

【参考方案4】：

div p 

选择父元素为“div”元素的所有“p”元素

div > p

表示直系子女 选择父元素为 'div' 元素的所有 'p' 元素

【参考方案5】：

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

这个例子说明了区别：

div spanbackground:red
div>spanbackground:green

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

abc 和 def 的背景颜色为绿色，而 ghi 的背景颜色为红色。

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

div>spanbackground:green
div spanbackground:red

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

【讨论】：

您添加的“重要”部分使此答案完整。谢谢！

【参考方案6】：

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

【讨论】：

我想我在 css 中使用它。但在 jquery 中我检测浏览器是否为 ie6（在 jquery 中我可以这样做吗？或者我需要使用

【参考方案7】：

想想英语中“child”和“descendant”这两个词的意思：

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

【讨论】：

一个重要的注意事项是子选择器将比后代选择器更快，它可以对具有 1000 个 DOM 元素的页面产生明显的影响。

很好的答案，但我也会简单地在问题中添加对他的示例的直接答案 - 只是为了让它变得清晰可笑。

【参考方案8】：

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

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

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