css选择器简介
在我们编写代码的时候，选择器的使用是非常重要的，选择器指明了css样式作用的对象，就像海上的航标，为我们指引方向，指引样式“走向”作用的对象。css选择器的灵活使用，能让我们可以迅速的找到与之对应的一个或多个元素的样式，极大程度上方便了我们的维护。
css选择器分类
css选择器有很多种类，不同的选择器有着不一样的意义，
通用选择器（*）
通用选择器用*表示，通过通用选择器，可以设置body里（包含body在内）所有元素的样式。
*{
font-size: 25px;
background-color: lightblue;
color: purple;
}
可以看到：body和body里的div元素都被添加上了设置的样式
标签选择器（元素选择器）
标签选择器又叫元素选择器，我还是习惯叫元素选择器多一点。它是一个很容易就能记住的选择器，需要添加样式的元素叫什么，选择器的值就填上什么，但是它会把HTML中所有叫这个名称的元素也选上并修改它们的样式。
div{
width: 100px;
height: 100px;
border: 2px solid black;
background-color: bisque;
}
它修改了所有div元素的样式，body元素的样式并不会被修改
ID选择器
ID：身份（identify）的意思，也就是说，我们需要给需要添加样式的元素赋予一个专属的身份ID，为什么是专属的呢？ID选择器拥有唯一性，一个ID只能在HTML中出现一次，和我们自己一样，世上只有唯一个我们。
<style>
#oneSheep{
width: 100px;
height: 100px;
border: 2px solid black;
background-color: bisque;
}
</style>
<body>
这里是一个大body
<div id="oneSheep">一只小羊</div>
<div>两只小羊</div>
<div>三只小羊</div>
</body>
它只给ID：oneSheep的div元素添加了样式，注意到没有：添加ID和选择ID时是有一定的格式的。ID添加在对应元素的起始标记里，选择时，需要在ID前加上#符号
既然ID选择器有唯一性，那ID出现出现重复时，会发生什么呢？
<style>
#oneSheep{
width: 100px;
height: 100px;
border: 2px solid black;
background-color: bisque;
}
</style>
<body>
这里是一个大body
<div id="oneSheep">一只小羊</div>
<div id="oneSheep">两只小羊</div>
<div>三只小羊</div>
</body>
咦！为什么两个div都添加了样式，不是说唯一性吗？是这样的：尽管HTML中出现多个相同ID的元素，它还是会识别有此ID的元素并给其添加样式，对于css选择器，id属性的唯一性似乎不存在。然而，对于js而言，它只会选择具有相同id名字元素中的第一个，它的唯一性体现在JS上了。出于一个好的编程习惯，同一个id不要在页面中出现第二次
类选择器
类选择器和ID选择器差不多，类选择器使用的前提是给元素添加一个类名，与ID选择器有区别的是：类选择可以在HTML文档中出现无数次，类选择器会识别所有添加了次类名的元素并给其添加样式，同样的，在JS中一样能全部识别并完成匹配。
<style>
.sheep{
width: 100px;
height: 100px;
border: 2px solid black;
background-color: bisque;
}
</style>
<body>
这里是一个大body
<div class="sheep">一只小羊</div>
<div class="sheep">两只小羊</div>
<div class="sheep">三只小羊</div>
</body>
你们看，所有添加了sheep类名的div元素都添加上了样式，要注意的是：它同样需要一定的格式
伪类选择器
当我们想只通过css实现一些简单的动态效果时，就需要用到伪类选择器（如鼠标点击，鼠标悬停等）
<style>
a:visited {
/* 已被点击的链接 */
color: chartreuse;
}
a:link {
/* 未被点击的链接 */
color: red;
}
a:hover {
/* 鼠标悬停其上 */
color: yellow;
}
a:active {
/* 鼠标按下、还没有释放 */
color: rgb(80, 106, 255);
}
</style>
<body>
<!-- 取消a标签在浏览器的默认事件 -->
<a href="javascript:void(false)" class="one">一只小羊</a>
<a href="https://www.baidu.com" class="two">两只小羊</a>
<a href="https://www.baidu.com" class="three">三只小羊</a>
<a href="https://www.baidu.com" class="fore">三只小羊</a>
</body>
在浏览器中，a标签默认已点击状态，不取消默认事件，是看不到未点击时的状态的
群组选择器
如字面意思一样，群组选择器可以帮助我们选择一群的目标，当我们想要给多个标签添加相同的样式时，我们可以通过群组选择器来完成，这样能够简洁我们的代码。
<style>
.one,
.two,
.three,
.fore{
height: 200px;
width: 200px;
border: 1px solid black;
background-color: aquamarine;
}
</style>
<body>
<div class="one">一只小羊</div>
<div class="two">两只小羊</div>
<div class="three">三只小羊</div>
<div class="fore">三只小羊</div>
</body>
可以看到，只需要书写一次样式，就能给所有选上的元素添加样式，要注意的是：选择器与选择器之间用，逗号隔开
属性选择器
属性选择器可以根据元素的属性，来选择元素，属性可以是标准属性，也可以是自定义的属性，用于精准的选择元素。属性选择器有很多，具体如下表
这份表截取自w3cschool官网
后代选择器
后代选择器能够帮助我们根据父代逐级逐级的找到它的后代，将对父元素的选择放在前面，对子元素的选择放在后面。
<style>
.one,
.two{
height: 100px;
width: 100px;
border: 1px solid black;
background-color: aquamarine;
}
.one div{
color: red;
font-size: 25px;
}
</style>
<body>
<div class="one">
<div>one</div>
</div>
<div class="two">
<div>two</div>
</div>
</body>
可以看到，它只给.one父级的后代div添加了样式，注意的是：父代元素的选择在后代元素之前、中间以空格分开，不当当是2层选择，还可以多层选择
子选择器
是不是觉得子选择器和后代选择器是一样的意思？其实它们是不一样的，子选择器只能选择父级直系的子代，也可以理解成，只选择父级的第一代子级后代。
.one>div{
background-color: blue;
}
</style>
<body>
<div class="one">one
<div class="two">two
<div class="three">three
<div class="fore">fore</div>
</div>
</div>
</div>
可以看到，它只修改了.one父级下的第一代div子级，并没有作用于three和fore这两级后代，注意的是：子选择器是通过“>”进行选择
伪元素选择器
所有伪元素选择器都必须放在出现该伪元素的选择器的最后面，也就是说伪元素选择器不能跟任何派生选择器（简单理解：{}前必须是伪元素）。常用的伪元素选择器有两个：after和before
<style>
.one{
width: 150px;
height: 150px;
border: 1px solid black;
background-color: aquamarine;
}
.two{
width: 100px;
height: 100px;
border: 1px solid pink;
}
.one::before{
content: ""; /* 不可缺属性，可填上文本内容 */
display: block; /* 将创建的盒子变成块盒，否则不能设置宽高等属性 */
width: 20px;
height: 20px;
background-color: blue;
}
.one::after{
content: "";
display: block;
width: 20px;
height: 20px;
background-color: brown;
}
</style>
<body>
<div class="one">
<div class="two">asdfasdf</div>
</div>
</body>
div：before能在div里所有子代最前面插入内容；
div：after能在div里所有子代最后面插入内容；
相邻同胞选择器
相邻同胞选择器是用+来选择的，它可以选择相邻的第一个元素来进行添加样式
<style>
div{
width: 100px;
height: 100px;
border: 1px solid black;
background-color: aquamarine;
}
.two+div{
background-color: blue;
}
</style>
<body>
<div class="one">one</div>
<div class="two">twof</div>
<div class="three">three</div>
<div class="fore">fore</div>
</body>
注意到没有，它只给第三个盒子修改了样子，所以说：这个相邻元素是指相邻两个元素中的下面那个
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
