<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*ul的第一个子元素*/
ul li:first-child{
background: blue;
}
/*ul的最后一个子元素*/
ul li:last-child{
background: red;
}
/*选中p1:定位到父元素<body>，选择当前的第一个元素p1
选中当前p元素的父级元素，选中父级元素的第一个，并且是当前元素才生效！顺序*/
p:nth-child(1){
background: aqua;
}
/*选中父元素，下的p元素的第二个，类型*/
p:nth-of-type(2){
background: maroon;
}
a:hover{
background: blue;
}
</style>
</head>
<body>
<a href="">你移到我身上试试，我变颜色给你看</a>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
</ul>
</body>
</html>
结果展示
原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/tech/pnotes/279102.html