演示权重的原理与计算方式
代码
h1{
color: aqua;
}
h1.title{
color: black;
}
h1#active.title{
color: antiquewhite;
}
分别为(0,0,1)(0,1,1)(1,1,1)
结构伪类,通过位置关系匹配子元素
代码
<!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>
css代码
.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);
}