后代选择器

后代组合器(通常用单个空格( )字符表示)组合了两个选择器,如果第二个选择器匹配的元素具有与第一个选择器匹配的祖先(父母,父母的父母,父母的父母的父母等)元素,则它们将被选择。利用后代组合器的选择器称为后代选择器

/* List items that are descendants of the "my-things" list */
ul.my-things li {
  margin: 2em;
}

从技术上讲,后代组合器是两个选择器之间的一个或多个 CSS  空格字符-空格字符和/或四个控制字符之一:回车,换页,换行和制表符在没有其他组合器的情况下。此外,组成组合器的空白字符可以包含任意数量的CSS注释。

语法

selector1 selector2 {
  /* property declarations */
}

Examples

CSS

li {
  list-style-type: disc;
}

li li {
  list-style-type: circle;
}

HTML

<ul>
  <li>
    <div>Item 1</div>
    <ul>
      <li>Subitem A</li>
      <li>Subitem B</li>
    </ul>
  </li>
  <li>
    <div>Item 2</div>
    <ul>
      <li>Subitem A</li>
      <li>Subitem B</li>
    </ul>
  </li>
</ul>

Result

规范

Specification Status Comment
Selectors Level 4
descendant combinator
Working Draft
Selectors Level 3
descendant combinator
Recommendation
CSS Level 2 (Revision 1)
descendant selectors
Recommendation
CSS Level 1
contextual selectors
Recommendation Initial definition

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
Descendant combinator (A B)Chrome Full support 1
Full support 1
Full support 61
Notes
Notes >>> is aliased to this selector since its use as the 'shadow-piercing descendant combinator' was deprecated.
Edge Full support 12Firefox Full support 1IE Full support 3Opera Full support 3.5Safari Full support 1WebView Android Full support ≤37
Full support ≤37
Full support 61
Notes
Notes >>> is aliased to this selector since its use as the 'shadow-piercing descendant combinator' was deprecated.
Chrome Android Full support 18
Full support 18
Full support 61
Notes
Notes >>> is aliased to this selector since its use as the 'shadow-piercing descendant combinator' was deprecated.
Firefox Android Full support 4Opera Android Full support 10.1Safari iOS Full support 1Samsung Internet Android Full support 1.0
Full support 1.0
Full support 8.0
Notes
Notes >>> is aliased to this selector since its use as the 'shadow-piercing descendant combinator' was deprecated.
A >> B syntax
Deprecated
Chrome No support NoEdge No support NoFirefox No support NoIE No support NoOpera No support NoSafari No support 10 — 11.1WebView Android No support NoChrome Android No support NoFirefox Android No support NoOpera Android No support NoSafari iOS No support 10 — 11.3Samsung Internet Android No support No

Legend

Full support  
Full support
No support  
No support
Deprecated. Not for use in new websites.
Deprecated. Not for use in new websites.
See implementation notes.
See implementation notes.

相关