举个例子:
<div>
<ul>
<li> </li>
</ul>
<div>
要定义li的样式,用包含选择符,你写成:
div li{...}
没有问题
若用子选择符,你只能写成:
ul> li{...}
不能写成
div> li{...}
因为div和li非“父子关系”,而是“祖孙关系”
子对象提供了更精细的控制
由此可以见包含选择符的深度和广度超过子对象选择符;而子对象选择符的针对性和唯一性比包含选择符强。
div{color:green;}
包含关系不限制包含的层数,例如上面的两个示例只要code被div包含,code内的文字颜色为绿色。
然而CSS子对象选择符,匹配文档中符合选择符规定的直接包含关系的元素
E > F
选择符,匹配当F元素是E元素的子元素的E元素 子对象选择符的英文名称为"child selectors",child,中文"孩子、儿女"的意思