子元素选择器(child selector)是CSS选择器中的一种,使用“>”符号选择作为某个元素直接子元素的元素。子元素选择器可以帮助开发者更准确地定位需要样式化的HTML元素。
举个例子,假设有如下HTML代码:
<div class="container">
<h2>Title</h2>
<p>First paragraph</p>
<div>
<h3>Subtitle</h3>
<p>Second paragraph</p>
</div>
</div>
如果我们想要选择.container
下面的直接子元素<p>
,而不是所有的<p>
元素, 就可以使用子元素选择器:
.container > p {
color: red;
}
上面的代码将只会给.container
下面直接子元素中的<p>
元素应用红色文本颜色,而不会影响到后代元素中的<p>
元素。
需要注意的是,子元素选择器只能选择作为某个元素直接子元素的元素,而不会选择任何孙子元素或更深层次嵌套的元素。另外,对于IE8及以下版本的浏览器来说,子元素选择器可能会无法正常工作,此时需要考虑其他选择器的方案。