收藏
PHPz批改状态：合格
老师批语：代码内容可以写在代码块中，这样会有高亮显示，方便阅读
h1{
color: aqua;
}
h1.title{
color: black;
}
h1#active.title{
color: antiquewhite;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> 实例演示结构伪类</title>
<link rel="stylesheet" href="css/fake-class.css">
</head>
<body>
<ul class="list">
<li class="li">item1</li>
<li class="li">item2</li>
<li class="li">item3</li>
<li class="li">item4</li>
<li class="li">item5</li>
<li class="li">item6</li>
<li class="li">item7</li>
<li class="li">item8</li>
</ul>
</body>
</html>
.list>li:nth-of-type(1){
background-color: aqua;
}
/ 匹配第二个 /
.list>li:nth-of-type(2){
background-color: rgb(25, 147, 76);
}
/ 匹配第三个 /
.list>li:nth-of-type(3){
background-color: rgb(25, 147, 76);
}
/ 匹配第四个 /
.list>li:nth-of-type(4){
background-color: rgb(25, 147, 76);
}
/ 匹配第五个 /
.list>li:nth-of-type(5){
background-color: rgb(25, 147, 76);
}
/ 匹配第六个 /
.list>li:nth-of-type(6){
background-color: rgb(25, 147, 76);
}
/ 匹配第七个 /
.list>li:nth-of-type(7){
background-color: rgb(73, 54, 63);
}
/ 匹配第八个 /
.list>li:nth-of-type(8){
background-color: rgb(106, 22, 161);
}
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
