极客教程什么是CSS中的大于号（>）选择器？
在CSS中，“>”符号不像其他编程语言那样用于比较两个值。在这里，我们使用大于号（>）作为选择器。
在CSS中，选择器用于选择单个或多个HTML元素。每当我们在选择器中使用大于号时，它会选择父元素的直接子元素，但不选择深层嵌套的子元素。
语法
用户可以按照下面的语法在CSS选择器中使用大于号。
selecter1>selector2 {
/* CSS code */
}
在上述语法中，“selector1”是一个父元素，“selector2”是一个直接子元素。因此，我们在声明块中为子元素定义样式。
示例1
在下面的示例中，我们已创建了HTML元素的有序列表。在CSS中，我们使用了“ol>li”选择器，它表示选择所有属于“ol”HTML元素直接子元素的“li”元素。
在输出中，用户可以观察到列表的所有元素都变成了蓝色，因为所有的“li”都是“ol”的直接子元素。
<html>
<head>
<style>
ol>li {
color: blue;
}
</style>
</head>
<body>
<h3>在CSS中使用<i>(>)CSS选择器</i>选择直接子元素</h3>
<ol>
<li> HTML </li>
<li> CSS </li>
<li> JavaScript </li>
<li> NodeJS </li>
</ol>
</body>
</html>
示例2
在下面的示例中，我们有一个包含“p”元素的“div”元素，它们在不同的级别上。在“div”元素中，我们添加了“h4”元素和“p”元素。因此，我们在第二个和第三个深度级别上添加了“p”元素。
在CSS中，我们使用“div>p”CSS选择器选择div元素的所有直接“p”元素。此外，我们使用“div p”CSS选择器选择div元素的所有“p”元素。
在输出中，用户可以观察到“color：red”只应用于第一个“p”元素，因为它是div元素的唯一直接子元素。在所有级别中，从“div p”CSS选择器中选择的儿童应用“background-color：aqua”。
<html>
<head>
<style>
div>p {
color: red;
}
div p {
background-color: aqua;
}
</style>
</head>
<body>
<h3>在CSS中使用<i>(>)CSS选择器</i>选择直接子元素</h3>
<div>
<p> 这个段落在第一级别。 </p>
<h3>
<p> 这个段落在第二级别。 </p>
<h4>
<p> 这个段落在第三级别。 </p>
</h4>
</h3>
</div>
</body>
</html>
示例3
在下面的示例中，我们使用大于号来从深度嵌套的级别选择HTML元素。这里的“container”HTML元素包含无序列表，并且我们还创建了“container”元素之外的无序列表。
在CSS中，我们使用“.container>ul>li”CSS选择器选择“li”元素的所有直接子元素，这里的“ul”元素应该是具有“container”类名的元素的直接子元素。
在输出中，我们可以看到所有CSS都应用于嵌套列表。
<html>
<head>
<style>
.container>ul>li {
color: red;
padding: 3px;
background-color: green;
font-size: 1.3rem;
}
</style>
</head>
<body>
<h3>在CSS中使用<i>(>)CSS选择器</i>选择直接子元素</h3>
<div class = "container">
<ul>
<li> one </li>
<li> Two </li>
<li> Three </li>
</ul>
</div>
<ul>
<li> Four </li>
<li> Five </li>
<li> Six </li>
</ul>
</body>
</html>
用户学会了在CSS中使用大于号（>）CSS选择器。它用于选择特定元素的直接子元素。因此，我们可以使用带有大于号（>）的HTML标签、类名、ID等CSS选择器。