first-child、last-child
选中当前标签父元素的所有子元素中的第一个和最后一个同种标签（如果第一个或者最后一个子标签不是当前选中的这种标签，则无法显示样式）
**
html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<link rel="stylesheet" href="css/style2.css">
<body>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
<h1></h1>
</ul>
</body>
</html>
css代码
ul li:first-child{
background-color: deepskyblue;
}
ul li:last-child{
background-color: darkred;
}
测试访问
nth-child
选中当前标签的父元素的所有子元素中第n个同种标签（如果第n个子标签不是当前选中的这种标签，则无法显示样式）
html代码同上
css代码
p:nth-child(1){
background-color: yellow;
}
测试访问
nth-of-type
选中当前标签的所有子元素中的第n个标签
html代码同上
css代码
p:nth-of-type(2){
background-color: green;
}
测试访问
扫一扫
707
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
