这是我参与11月更文挑战的第28天，活动详情查看：2021最后一次更文挑战
3、选择器
选择器的用处：用于准确的选中元素（就是HTML种讲的标签），并赋予CSS样式。
3.1 标签选择器
作用：根据标签的名字找到标签，但是标签选择器会找到所有同名选择器。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标签选择器</title>
<style>
/*标签选择器:直接把页面中的所有同名标签当做一个选择器进行选择*/
p{
color: pink;
}
</style>
</head>
<body>
<p>我是段落标签1</p>
<p>我是段落标签2</p>
</body>
</html>
3.2 类选择器
作用：通过标签的class属性，选择对应的标签元素，类选择器的作用对多个标签（往往需要相同的样式）设置样式，一个标签可以设置多个class值，值与值之间用空格隔开，这个标签会具有所有class包含的样式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>类选择器</title>
<style>
/*类选择器，也称class选择器。通过.进行选择*/
.p1{
color:red;
}
.p2{
font-size:60px;
}
</style>
</head>
<body>
<p class="p1">我是段落标签1</p>
<p class="p1 p2">我是段落标签2</p>
<p>我是段落标签3</p>
</body>
</html>
3.3 id选择器
作用：通过标签的id属性，选择对应的元素。类选择器可以选择多个，因为class属性不唯一，但是id选择器只能选择一个，因为id是唯一的。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>id选择器</title> <style> /*第三种选择器：id选择器 通过#进行选择*/ #p2{ color:blue; } </style></head><body> <p id="p2">我是段落标签</p></body></html>
3.4 群组选择器、全选择器（通配选择器）
群组选择器是可以同时选择多个标签的选择器,全选择器顾名思义就是选择全部的标签。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>群组选择器</title>
<style>
/* 群组选择器：不同选择器之间用逗号隔开。 全选择器: 通过*选择全部的标签。 */
p,
span {
color: pink;
}
* {
font-size: 50px;
}
</style>
</head>
<body>
<p>我是段落标签</p> <span>我是文本标签</span>
<h1>我是一级标签</h1>
<h2>我是二级标签</h2>
<h2>我是三级标签</h2>
</body>
</html>
3.5 层次选择器
层次选择器又分为后代选择器、子代选择器、相邻选择器、兄弟选择器。层次选择器是通过层次嵌套的关系进行选择标签的，块状标签可以嵌套内联标签（行内元素）和其他块状标签；内联标签只能嵌套文本和其他内联标签,但不能嵌套块状标签。
（1）后代选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>后代选择器</title>
<style>
/*后代选择器: 用空格隔开,后代是它里面嵌套的所有标签 此例就是div标签里的所有的ol标签，不管ol里嵌套多少ol，都是div的后代 */
div ol {
list-style: none;
}
</style>
</head>
<body>
<div>
<ol>
<li>我是有序列表1</li>
<li>我是有序列表2</li>
<li>我是有序列表3 <ol>
<li>我是有序列表11</li>
<li>我是有序列表22</li>
</ol>
</li>
</ol>
</div>
</body>
</html>
（2）子代选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>子代选择器</title>
<style>
/* 子代选择器 用>隔开 子代选择器只能选择他的儿子，在此就是选择id为ul1的无序列表的儿子 上述语法格式中的儿子选择器可以是id选择器、class选择器也可以是标签名选择器 */
#ul1>li {
list-style: none;
}
</style>
</head>
<body>
<ul id="ul1">
<li>1</li>
<li>2</li>
<li>3 <ul>
<li>11</li>
<li>22</li>
<li>33</li>
</ul>
</li>
</ul>
</body>
</html>
（3）兄弟选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>兄弟选择器</title>
<style>
/* 兄弟选择器: 用~进行选择,只要是有同一个父亲的就称为兄弟 在本例中，id为p2的父亲是body，所以body里的标签都是他的兄弟 */
#p2~p {
color: pink;
}
</style>
</head>
<body>
<p>我是段落标签1</p>
<p id="p2">我是段落标签2</p>
<p>我是段落标签3</p>
<p>我是段落标签4</p>
</body>
</html>
（4）相邻兄弟选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>相邻兄弟选择器</title>
<style>
/* 层次选择器第四种：相邻选择器: 用+进行选择先是找兄弟，然后选择其中相邻的兄弟 */
#p2+p {
color: red;
}
</style>
</head>
<body>
<p>我是段落标签1</p>
<p id="p2">我是段落标签2</p>
<p>我是段落标签3</p>
<p>我是段落标签4</p>
</body>
</html>
3.6 属性选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>属性选择器</title>
<style>
/*属性选择器:选中所有p标签里有name属性的 本例中如果只想选中“我是段落标签1”，那么就改为p[name="p1"]即可 */
p[name] {
color: red;
}
</style>
</head>
<body>
<p name="p1">我是段落标签1</p>
<p name="p2">我是段落标签2</p>
<p name="p3">我是段落标签3</p>
<p>我是段落标签4</p>
</body>
</html>
