nth-of-type选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>nth-of-type选择器</title>
<style type="text/css">
/*先分类 后查找 */
/*修改第二个li*/
li:nth-of-type(2){
background-color: red;
}
/*修改第三个p标签*/
p:nth-of-type(3){
background-color: orange;
}
/*修改偶数的li标签*/
li:nth-of-type(2n){
color:deeppink;
}
/*修改奇数的li标签*/
li:nth-of-type(2n+1){
color:greenyellow;
}
/*修改第一个段落的*/
p:first-of-type{
border: 2px solid red;
width: 600px;
}
/*修改最后一个Li标签*/
li:last-of-type{
border: 3px double orangered;
width: 400px;
}
</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>
</html>
