CSS子代与子代选择器

CSS

Itachi

2020-03-23

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

后代选择器是否

div p

选择所有pdiv它是否是一个即时descedent?因此,如果处于p另一个div,它将仍然被选中?

然后是选择器:

div > p

有什么不同?一个孩子意味着直系孩子吗?例如。

<div><p>

<div><div><p>

是否都将被选中?

第2972篇《CSS子代与子代选择器》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

6个回答
小胖 2020.03.23

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

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

第一个称为子代选择器,第二个称为子选择器

樱小胖Mandy 2020.03.23

请注意,Internet Explorer 6不支持子选择器。(如果您在jQuery / Prototype / YUI等选择器中使用选择器,而不是在样式表中使用它,则该选择器仍然可以使用)

Stafan路易 2020.03.23

从理论上讲: Child =>祖先的直接后代(例如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/

DavaidTony宝儿 2020.03.23

Bascailly,“ AB ”所有选择B的内部,而“ A> B ”选择B的东西只是孩子的一个,也不会选择b什么是孩子b是什么的孩子一个

此示例说明了不同之处:

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

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

abcdef的背景色将是绿色,但是ghi将具有红色的背景色。

重要说明:如果您将规则的顺序更改为:

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

所有字母都将具有红色背景,因为子代选择器也会选择子字母。

番长 2020.03.23
div p 

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

div> p

这意味着直系子代选择所有“ p”元素,其中父代是“ div”元素

Tony凯 2020.03.23

只要想一想英语中的“孩子”和“后代”是什么意思:

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

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android