CSS参考手册
选择 | Selectors
后代选择器 | Descendant selectors
后代组合因子 ——通常是通过一个单一的sapce()字符来表示——它结合了两个选择器,且如果第二个选择器所选择的元素的一些祖先元素为第一选择器所匹配,那么它就会选择出那些满足该条件的,由第二个选择器所选择出的那些元素。使用后代组合因子的选择器称为后代选择器。
/* List items that are descendants of the "my-things" list */
ul.my-things li {
margin: 2em;
}
后代组合子在技术上是一个或多个CSS空白字符 —— 空格字符和/或四个控制字符之一:回车,换页,换行和制表符 ——在没有另一个组合因子的情况下,两个选择器之间。此外,组合因子所包含的空白字符可以包含任意数量的CSS注释。
这个组合因子的抽象特性使得它与其他标准化的组合因子不同,因为这些组合因子全部由不同的有限字符序列表示。这种不一致性是通过在序列(>>
)中增加一个由两个大于号字符表示的多余的后代组合因子来实现的,这种情形下,它的形式非常接近于子元素组合因子,而且他们也有类似的功能。
语法
selector1 selector2 { /* property declarations */ }
selector1 >> selector2 { /* property declarations */ }
实例
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>
结果
规范
Specification |
Status |
Comment |
---|---|---|
Selectors Level 4The definition of 'descendant combinator' in that specification. |
Working Draft |
Introduced >> as descendant combinator in addition to the whitespace as combinator. |
Selectors Level 3The definition of 'descendant combinator' in that specification. |
Recommendation |
|
CSS Level 2 (Revision 1)The definition of 'descendant selectors' in that specification. |
Recommendation |
|
CSS Level 1The definition of 'contextual selectors' in that specification. |
Recommendation |
Initial definition |
浏览器兼容性
Feature |
Chrome |
Edge |
Firefox (Gecko) |
Internet Explorer |
Opera |
Safari |
---|---|---|---|---|---|---|
Basic support |
(Yes) |
(Yes) |
(Yes) |
(Yes) |
(Yes) |
(Yes) |
|
No support |
No support |
No support |
No support |
No support |
10 |
Feature |
Android |
Edge |
Firefox Mobile (Gecko) |
IE Mobile |
Opera Mobile |
Safari Mobile |
---|---|---|---|---|---|---|
Basic support |
(Yes) |
(Yes) |
(Yes) |
(Yes) |
(Yes) |
(Yes) |
|
? |
? |
? |
? |
? |
? |
选择 | Selectors相关
层叠样式表( Cascading Style Sheets )是一种用来表现 HTML 或 XML 等文件样式的计算机语言。CSS 不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。