结构伪类演示
建二个文件。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}