后代选择器

概述

当使用 ␣ 选择符 (这里代表一个空格,更确切的说是一个或多个的空白字符) 连接两个元素时使得该选择器可以只匹配那些由第一个元素作为祖先元素的所有第二个元素(后代元素) . 后代选择器与 子选择器 很相似, 但是后代选择器不需要相匹配元素之间要有严格的父子关系.

语法

元素1 元素2 {样式声明 }

示例

span { background-color: white; }
div span { background-color: DodgerBlue; }

当上面的CSS作用于下面的HTML时:

<div>
  <span>Span 1.
    <span>Span 2.</span>
  </span>
</div>
<span>Span 3.</span>

会产生下面的效果:

Span 1. Span 2.
Span 3.

规范

浏览器兼容性

相关