当元素是某个元素的子元素时, 子选择器匹配。子选择器由两个或多个由">"分隔的选择器组成。也称为元素>元素选择器。它选择特定父级的所有元素。
语法如下：
- 选择所有子元素。
element > element - 如果子元素递归选择, 则使用以下语法。
div.class, div.class > * { // CSS Property }
示例1：本示例选择所有子元素。
<!DOCTYPE html>
<html>
<head>
<title>
Child element selector
</title>
<style>
div > p {
background-color: green;
}
</style>
</head>
<body>
<div>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<span>
<p>Paragraph 3</p>
</span>
</div>
<p>Paragraph 4</p>
<p>Paragraph 5</p>
</body>
</html> 输出如下：
示例2：本示例以递归方式选择所有子元素。
<!DOCTYPE html>
<html>
<head>
<title>
Child element selector
</title>
<style>
div.GFG > * {
background-color: green;
}
</style>
</head>
<body>
<div class="GFG">
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<span>
<p>Paragraph 3</p>
</span>
</div>
<p>Paragraph 4</p>
<p>Paragraph 5</p>
</body>
</html> 输出如下：
更多前端开发相关内容请参考：lsbin - IT开发技术：https://www.lsbin.com/
查看以下更多CSS相关的内容：