Blogger Information
Blog 3
fans 0
comment 0
visits 1131
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
作业标题:1020作业
手机用户079579413
Original
319 people have browsed it

演示权重的原理与计算方式

代码

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);
}

Correcting teacher:PHPzPHPz

Correction status:qualified

Teacher's comments:代码内容可以写在代码块中,这样会有高亮显示,方便阅读
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post