nth-child
nth-of-type(推荐使用)
first-child
last-child
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title结构性伪类选择器></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
list-style: none;
}
ul{
width: 500px;
height: 500px;
display:flex;
flex-wrap: wrap;
justify-content: space-around;
align-content: space-around;
}
li,div{
width: 150px;
height: 150px;
background-color: gold;
text-align: center;
line-height: 150px;
color: white;
font-size: 3em;
}
ul li:nth-child(2n){
background-color: tomato;
}
/* ul li:nth-of-type(6){
background-color: pink;
} */
ul li:nth-of-type(3n+1){
/* 推荐使用 */
background-color: pink;
}
ul li:first-child{
background-color: cyan;
}
ul li:last-child{
background-color: cyan;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<!-- <div>2</div> -->
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
</body>
</html>
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
