css选择器
css选择器有5个大类：
- 基本选择器
- 复合选择器
- 伪类选择器
- 伪元素选择器
- 属性选择器
接下来具体介绍各个选择器：
一、基本选择器
1、 通用选择器
通用选择器能够匹配所有的元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
*{
color: green;
}
</style>
</head>
<body>
<h1>万物皆虚，万事皆允</h1>
<p>万物皆虚，万事皆允</p>
<p>万物皆虚，万事皆允</p>
</body>
</html>
2、元素选择器
元素选择器就是以某个html元素作为选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
h1{
text-align: center;
}
</style>
</head>
<body>
<h1>万物皆虚，万事皆允</h1>
<p>万物皆虚，万事皆允</p>
<p>万物皆虚，万事皆允</p>
</body>
</html>
3、类选择器
类选择器采用html5的全局属性class，用它来匹配指定的元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
.a{
color: red;
}
.b{
color: blue;
}
</style>
</head>
<body>
<h1>万物皆虚，万事皆允</h1>
<p class="a">万物皆虚，万事皆允</p>
<p class="b">万物皆虚，万事皆允</p>
</body>
</html>
4、id选择器
id选择器是使用html元素的id属性来进行定位的
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
#a{
color: green;
}
#b{
color: pink;
}
</style>
</head>
<body>
<h1>万物皆虚，万事皆允</h1>
<p id="a">万物皆虚，万事皆允</p>
<p id="b">万物皆虚，万事皆允</p>
</body>
</html>
二、复合选择器
符合选择器是由两个或多个基础选择器通过不同的方式进行组合，来达到更精确的定位。
1、交集选择器
交集选择器由两个选择器直接连接构成，第一个选择器必须是元素选择器，第二个选择器必须是类选择器或id选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
p#b{
color:yellow;
}
p.a{
color:pink;
}
</style>
</head>
<body>
<h1>万物皆虚，万事皆允</h1>
<p class="a">万物皆虚，万事皆允</p>
<p id="b">万物皆虚，万事皆允</p>
<p id="b">万物皆虚，万事皆允</p>
</body>
</html>
2、并集选择器
由两个或两个以上任意选择器构成，所设置的样式对参与的每个选择器都有效
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
h1,p{
color:green;
}
</style>
</head>
<body>
<h1>万物皆虚，万事皆允</h1>
<p class="a">万物皆虚，万事皆允</p>
<p id="b">万物皆虚，万事皆允</p>
<p id="b">万物皆虚，万事皆允</p>
</body>
</html>
3、后代选择器
用于选择包含在指定选择器匹配的元素中的后代元素，后代选择器使用空格进行分隔
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
body p{
color:red;
}
</style>
</head>
<body>
<p>
hahaha
<div>
nimei
<p>
3
</p>
</div>
</p>
</body>
</html>
4、子元素选择器
子元素选择器和后代选择器很像，但只选择匹配元素中的直接子元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
body > p{
color:red;
}
</style>
</head>
<body>
<p>
hahaha
<div>
nimei
<p>
3
</p>
</div>
</p>
</body>
</html>
5、相邻兄弟选择器
如果需要选择紧接在某个元素后面的元素，而且两者具有共同的父元素，就可以使用相邻兄弟选择器。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
.a+.b{
color:red;
}
</style>
</head>
<body>
<p class="a">第一行</p>
<p class="b">第二行</p>
<p class="c">第三行</p>
<p class="d">第四行</p>
</body>
</html>
6、通用兄弟选择器
通用兄弟选择器比相邻兄弟选择器的匹配范围更广一些，通用兄弟选择器匹配的元素无需挨着，只需要有共同父亲即可，也就是在同一层级。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
.a ~ p{
color:red;
}
</style>
</head>
<body>
<p class="a">第一行</p>
<p class="b">第二行</p>
<p class="c">第三行</p>
<p class="d">第四行</p>
</body>
</html>
三、伪元素选择器
1、::first-line选择器
用于匹配文本块的第一行内容，并且仅对块级元素的内的第一行内容有效
tip:输入lorem可以填充乱数假文
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
::first-line{
color:red;
}
</style>
</head>
<body>
<div>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempore, aut, officiis totam voluptatum, odit reprehenderit corrupti ipsam nesciunt veniam ut eos omnis necessitatibus inventore corporis! Dolorem exercitationem officiis dolor soluta!</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione labore quibusdam, deleniti, nobis repellendus doloremque voluptatum velit, repudiandae dolorem inventore qui. Sit vero veritatis deleniti beatae ea, quibusdam reprehenderit eligendi?</p>
</body>
</html>
如果想要让::first-line仅对一个元素起效，就要在冒号前加上这个元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
p::first-line{
color:red;
}
</style>
</head>
<body>
<div>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempore, aut, officiis totam voluptatum, odit reprehenderit corrupti ipsam nesciunt veniam ut eos omnis necessitatibus inventore corporis! Dolorem exercitationem officiis dolor soluta!</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione labore quibusdam, deleniti, nobis repellendus doloremque voluptatum velit, repudiandae dolorem inventore qui. Sit vero veritatis deleniti beatae ea, quibusdam reprehenderit eligendi?</p>
</body>
</html>
2、::first-leter选择器
用来选中文本块的第一个字符
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
::first-letter{
color:red;
}
</style>
</head>
<body>
<div>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempore, aut, officiis totam voluptatum, odit reprehenderit corrupti ipsam nesciunt veniam ut eos omnis necessitatibus inventore corporis! Dolorem exercitationem officiis dolor soluta!</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione labore quibusdam, deleniti, nobis repellendus doloremque voluptatum velit, repudiandae dolorem inventore qui. Sit vero veritatis deleniti beatae ea, quibusdam reprehenderit eligendi?</p>
</body>
</html>
同样，在冒号前加入特定标签，会让::first-letter的效果仅针对该标签。
3、::before和::after
将content属性的值插入到指定区域中
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
p::before{
content: "大老师";
}
p::before{
content: url(img/a.png);
}
p::after{
content: "自爆"
}
</style>
</head>
<body>
<p>的技能是</p>
</body>
</html>
4、selection选择器
用于匹配用户选中的部分文本
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
::selection{
color:red;
background-color: black;
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae id soluta nemo ad et. Quibusdam, necessitatibus harum? Corporis inventore iure incidunt ea illo tempora nobis ratione consectetur voluptates vel! Quisquam.</p>
</body>
</html>