Blogger Information
Blog 25
fans 0
comment 0
visits 9403
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
前端20221020-2
P粉114035831
Original
317 people have browsed it

结构伪类演示

建二个文件。1.html 2.css

html

!

<html>
<head>
<title>结构伪类演示</title>
<link rel="stylesheet" herf="css1/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>
<li class="li">item9</li>
</ul>
</body>
</html>

css

css1/fake-class.css

匹配第一个.语法糖
.list > li:first-of-type{background-color:red}

匹配最后一个.语法糖
.list > li:last-of-type{background-color:red}

(an+b)
1.a:系数,[0,1,2,3…]
2.n:系数,[0,1,2,3…]
3.b:偏移量,从0开始

全选
.list > li:nth-of-type(1n+0){background-color:red}
.list > li:nth-of-type(1n){background-color:red}
.list > li:nth-of-type(n){background-color:red}

从第三个开始选
.list > li:nth-of-type(1n+3){background-color:red}

只选前三个
.list > li:nth-of-type(-1n+3){background-color:red}

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