选择器
选择器承担的是，从html文档中选择一个或多个标签来应用css的规则。
基本选择器
通用选择器
选择所有元素。（可选）可以将其限制为特定的名称空间或所有名称空间。
语法:*
示例
*{
color: red;
}
元素选择器
按照给定的节点名称，选择所有匹配的元素。
语法: element
示例:
p{
color:red
}
匹配所有p元素标签
类选择器
按照给定的 class 属性的值，选择所有匹配的元素。
语法: .className
示例:
.index{
color:red;
}
<p class='index'></p>
匹配 class='index'的标签元素(此处是p)
ID选择器
按照 id 属性选择一个与之匹配的元素。需要注意的是，一个文档中，每个 ID 属性都应当是唯一的。
语法: #idName
示例:
#id{
color:red;
}
<p id="id"></p>
属性选择器
按照给定的属性，选择所有匹配的元素。
语法: [attr] [attr=value] [attr~=value] [attr|=value] [attr^=value] [attr$=value] [attr*=value]
示例:
[disabled]{
color: color;
}
<button disabled>按钮</button>
高级选择器
分组选择器
, 是将不同的选择器组合在一起的方法，它选择所有能被列表中的任意一个选择器选中的节点, 即选择器的规则合并写法。
语法: A,B
示例:
p,.class{
color:red;
}
<p>color</p>
<button class='class'></button>
后代组合器
（空格）组合器选择前一个元素的后代节点
语法: A B
示例:
div span{
color:red;
}
匹配 所有位于 任意 div元素之内的 span元素
直接子代组合器
> 组合器选择前一个元素的直接子代的节点。
语法: A>B
示例:
ul > li{
color:red;
}
匹配 直接 嵌套在 ul 元素内的所有 li 元素
一般兄弟组合器
~ 组合器选择兄弟元素，也就是说，后一个节点在前一个节点后面的任意位置，并且共享同一个父节点。
语法: A ~ B
示例:
p ~ span{
color:red;
}
匹配 p 元素后 所有 span 元素
紧邻兄弟组合器
+ 组合器选择相邻元素，即后一个元素紧跟在前一个之后，并且共享同一个父节点。
语法: A + B
示例:
h2 + p{
color: red;
}
匹配所有紧邻在 h2 元素后的 p 元素。
列组合器
|| 组合器选择属于某个表格行的节点。
语法: A || B
示例:
col || td{
color: red;
}
匹配所有 col 作用域内的 td 元素。
伪选择器（Pseudo）
伪类
: 伪选择器支持按照未被包含在文档树中的状态信息来选择元素。
伪元素
:: 伪选择器用于表示无法用 HTML 语义表达的实体。
优先级
当多个选择器同时应用到(匹配到)某一个元素上, 选择器的优先级将决定哪些规则被应用，哪些规则被覆盖。
优先级就是分配给指定的 CSS 声明的一个权重，它由 匹配的选择器中的 每一种选择器类型的 数值 决定。
而当优先级与多个 CSS 声明中任意一个声明的优先级相等的时候，CSS 中最后的那个声明将会被应用到元素上。
| 选择器 | 权重 |
|---|---|
style='' 内联选择器 |
1000 |
| id选择器 | 0100 |
| 类选择器, 属性选择器,伪类 | 0010 |
| 类型选择器, 伪元素 | 0001 |
!important 例外规则
当在一个样式声明中使用一个 !important 规则时，此声明将覆盖任何其他声明。
通配选择符（*）关系选择符（+, >, ~, ' ', ||）和 否定伪类 （:not()）对优先级没有影响。