CSS 中的后代选择器

cssweb developmentfront end technology更新于 2025/1/19 5:32:17

CSS 元素选择器用于选择元素名称与第二个选择器匹配的第一个元素的后代。

语法

CSS 后代选择器的语法如下 −

element element {
   /*declarations*/
}

示例

以下示例说明 CSS 后代选择器 −

<!DOCTYPE html>
<html>
<head>
<style>
div {
   float: right;
   margin: 25px;
   padding: 5px;
   width: 80px;
   height: 80px;
   border: solid aqua;
}
div div {
   border-color: blue;
   border-radius: 50%;
}
div div div {
   border-color: orange;
   border-radius: unset;
}
</style>
</head>
<body>
<div>
<div>
<div>
</div>
</div>
</div>
</body>
</html>

输出

这将给出以下输出 −

示例

<!DOCTYPE html>
<html>
<head>
<style>
li li {
   background-color: lightsteelblue;
}
</style>
</head>
<body>
<ol>
<li></li>
<ul>
<li>
<ul>
<li></li>
</ul>
</li>
</ul>
<li></li>
</ol>
</body>
</html>