<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>nth-child选择器</title>
<style type="text/css">
/*nth-child*/
/*选中第一个li*/
ul li:first-child{
background-color: greenyellow;
}
/*选中最后一个li*/
li:last-child{
background-color: red;
}
/*选中第二个li*/
li:nth-child(2){
color:green;
}
/*选中偶数的li标签*/
li:nth-child(2n){
background-color: yellow;
}
li:nth-child(even){
border: 3px solid yellowgreen;
width: 600px;
}
/*选中奇数的li标签 */
li:nth-child(2n+1){
font-size: 20px;
}
li:nth-child(odd){
font-family: "Kaiti";
font-size: 40px;
}
/*选中第四个 第八个li标签 4的倍数*/
li:nth-child(4n){
width:400px;
border: 2px solid red;
}
</style>
</head>
<body>
<ul>
<p>乱入的P标签</p>
<li>列表1</li>
<p>段落一</p>
<li>列表2</li>
<li>列表3</li>
<p>段落二</p>
<p>段落三</p>
<li>列表4</li>
<li>列表5</li>
<p>段落四</p>
<li>列表6</li>
<li>列表7</li>
<p>段落五</p>
<p>段落六</p>
<li>列表8</li>
</ul>
</body>
<!--
选择器:nth-child
不会进行分类，必须找到指定位置和指定标签
适用于同一类型下的标签寻找
-->
<!--
例如 :
-->
</html>
网友评论