HTML子选择器是一种CSS选择器，用于选择一个元素的直接子元素。它使用>符号将两个元素分隔开来。以下是HTML子选择器的示例：
<div class="parent">
<div class="child">
<p>这是一个段落。</p>
</div>
<p>这也是一个段落，但它不是子元素。</p>
</div>上面的HTML代码中，父元素（<div class=”parent”>）包含两个子元素（<div class=”child”>和<p>），子元素<div class=”child”>内包含一个段落元素（<p>）。
如果我们想选择子元素<div class=”child”>并对其应用样式，可以使用子选择器来选择它：
.parent > .child {
background-color: lightblue;
}上面的CSS代码中，>符号表示选择父元素（<div class=”parent”>）的直接子元素（<div class=”child”>），并将其背景颜色设置为浅蓝色。
下面是一个完整的HTML5页面示例，展示了HTML子选择器的使用：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML子选择器示例</title>
<style>
.parent > .child {
background-color: lightblue;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">
<p>这是一个段落。</p>
</div>
<p>这也是一个段落，但它不是子元素。</p>
</div>
</body>
</html>在上面的示例中，.parent > .child选择器将选择父元素<div class=”parent”>的直接子元素<div class=”child”>，并将其背景颜色设置为浅蓝色。当页面被加载时，子元素<div class=”child”>的背景颜色将显示为浅蓝色。
正文完