CSS高级选择器
1.层次选择器
后代选择器：
语法
body p{ background: red; }
子选择器：
语法
body>p{ background: pink; }
相邻兄弟选择器：
.active+p { background: green; }
通用兄弟选择器：
.active~p{ background: yellow; }
2.结构伪类选择器
示例
<html>
<head lang="en">
<meta charset="UTF-8">
<title>使用CSS3结构伪类选择器</title>
</head>
<body>
<p>p1</p><p>p2</p><p>p3</p>
<ul>
<li>li1</li><li>li2</li><li>li3</li>
</ul>
</body>
</html>
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZGFg69wH-1609229850595)(en-resource://database/539:1)]](https://i-blog.csdnimg.cn/blog_migrate/85a3122ca68a0079a84736dc011e108d.png)
ul li:first-child{ background: red;}
ul li:last-child{ background: green;}
p:nth-child(1){ background: yellow;}
p:nth-of-type(2){ background: blue;}
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pBy8U1Fk-1609229850599)(en-resource://database/543:1)]](https://i-blog.csdnimg.cn/blog_migrate/cd55fea0768befe22eb5a0359d78b364.png)
3.属性选择器
语法：
a[id] { background: yellow; }
a[class*=links] { background: red; }
4.小结
扫一扫
5898
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
