我们在开发页面时，最常遇到的一个情况就是选择对应内容书写样式。这就涉及到了我们经常说的选择器了，例如我们经常用到的.content{},这就是选择器中的类选择器。今天也是趁着复习的机会，来好好整理一下css的选择器和他们的优先及关系。
css选择器有哪些？
我们在书写样式时经常用到的选择器有标签选择器，id选择器，类选择器。但是，除了这些选择器外，还有一些组合式的选择器，下面我就一一给大家介绍一下各种选择器。
普通选择器
1、 标签选择器
标签选择器就是通过标签来选择相应的元素。例如：
css
p {
font-size: 16px;
}我们通过p这个标签来修改p标签里面的样式，将其内字体大小设置为16px
2、类选择器
我们在定义一个dom元素时，通常会给他添加一个类名，如<p class="title">不知道些什么</p>，我们在进行样式编写时就可以通过类名来选择，如：
css
.title {
font-size: 16px;
}3、id选择器
我们不仅可以通过类名来选择想要的dom元素，还可以通过id来选择dom元素。如<p id="title">不知道些什么</p>，给元素绑定个id，然后通过id来选择它
css
#title {
font-size: 16px;
}组合选择器
组合选择器，就是通过前面的基础选择器组合起来进行选择。组合选择器有后代选择器，自己选择器，兄弟选择器，群组选择器
1、后代选择器
后代选择器是用来选取某个元素的所有后代元素。如：
html
<div id="app">
<p>绿色</p>
<div>
<p>绿色</p>
</div>
</div>
css
#app p {
color: green;
}通过id选择器选择id为app的容器，然后选择这个容器下面的所有p标签的dom元素。
2、子集选择器
这个选择器就是可以只选择它下面一层的内容了，如上面一样，使用子选择器，就只能选择到id为app容器直接下面的一个p标签。具体的效果可以自己去看看，就只有第一个文本的颜色为绿色。
css
#app>p {
color: green;
}3、兄弟选择器
兄弟选择器分为相邻兄弟选择器和一般兄弟选择器。分别是 h1+p ， h1~p相邻兄弟就是只选择它旁边的选择器，而一般选择器是选择另一个元素之后的所有同级元素。例如：
xml
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h1 + p {
color: green;
}
/* h1 ~ p {
color: pink;
} */
</style>
</head>
<body>
<h1>Title</h1>
<p>什么颜色</p>
<p>什么颜色</p>
</body>
</html>这个时候就是第一个p标签的颜色为绿色，如果使用一般兄弟选择器的话就是两个p标签内容都为粉色。
4、群组选择器
就是把你想要的内容都集合在一起书写，如：
css
p, h1, h2 {
color: black;
}这个就很简单了，就不需要过多的介绍了。
4、属性选择器
属性选择器在CSS中用于选择具有特定属性的元素。我们可以通过这个选择器来选择具有特定属性的元素，还可以选择具有指定属性和特定值的元素。如：
css
input[type="text"] {
background-color: lightblue;
}
css
[data-index] {
color: red;
}伪选择器
这个为什么叫伪选择器，因为它并不存在。
1、伪类选择器
就是向选择器添加一些特定的样式，如：鼠标放上去的样式，选中的样式，访问过的样式等等。 例如：
css
p:hover{
font-weight: bold;
}这表示鼠标放上去的样式
2、伪元素选择器
伪元素选择器在CSS中用于选择和样式化元素的特定部分，而不是整个元素本身。如:before，:after 表示刚开始，和结束前。还有一些其他的，不过我们最常用的还是这两个。
xml
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pseudo-Element Example</title>
<style>
/* CSS 规则 */
.quote::before {
content: """;
}
.quote::after {
content: """;
}
.quote::first-letter {
font-size: 2em;
}
.quote::first-line {
color: red;
}
</style>
</head>
<body>
<p class="quote">用伪元素来添加引号，并突出显示第一字母和第一行文字。</p>
</body>
</html>选择器的优先级
选择器是有优先级的，这样才能确定两个选择器选择同一个元素时会使用哪种样式。在MDN中也有介绍关于选择器的优先级的问题。
优先级就是分配给指定的 CSS 声明的一个权重，它由 匹配的选择器中的 每一种选择器类型的 数值 决定。 而当优先级与多个 CSS 声明中任意一个声明的优先级相等的时候，CSS 中最后的那个声明将会被应用到元素上。 当同一个元素有多个声明的时候，优先级才会有意义。因为每一个直接作用于元素的 CSS 规则总是会接管/覆盖（take over）该元素从祖先元素继承而来的规则。
备注： 文档树中元素的接近度（Proximity of elements）对优先级没有影响。
------MDN-优先级
但是我感觉很官方，看的很懵逼。所以通过查找一些资料，以及实验总结了这些选择器的优先级。对于选择器优先级可以这样来划分：
! important 最高权限
优先级 important>内联 > id > class > ... > 标签
省略号代表：后代选择器 = 子集 = 兄弟
这组合选择器很难评的，因为它是通过多个选择器组合在一起的，如果它以id选择器组合的话，它的优先级就比类选择器要高，所以我就放后面了。
相同优先级的选择器会进行覆盖，也就是后面的样式会把前面的样式覆盖掉。
总结
这就是我们常用的选择器及其优先级，我在这里就简单的整理了一下，可能还有不足的地方，希望大佬指正。