CSS中的“>”符号作用
2025-04-09
CSS中的“>”符号表示子代选择器，用于选择某个元素的所有直接子元素，而不包括后代元素。
具体作用
选择直接子元素：使用“>”符号可以精确地选择某个元素的直接子元素。例如，.parent > div会选择所有作为.parent直接子元素的div元素，而不会选择更深层次的子元素。
排除后代元素：与空格符号“ ”不同，“>”只选择直接的子元素，不包括后代元素。例如，.parent div会选择所有div元素，无论它们是直接子元素还是后代元素。
示例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>大于号的使用</title>
<style type="text/css">
.parent > div {
width: 200px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div>
<div></div>
</div>
<div>
<ul>
<li>
<div></div>
</li>
</ul>
</div>
</body>
</html>
在这个例子中，只有.parent的直接子元素div会被设置样式，而嵌套在li内部的div则不会被应用该样式
