CSS 选择器规定了CSS规则会被应用到哪些元素上。
【备注：暂时没有能够选择 父元素、父元素的同级元素，或 父元素的同级元素的子元素的选择器或者组合器】
基本选择器
1.通用选择器（Universal selector）：*
2.类型选择器（Type selector）：elementname
3.类选择器（Class selector）：.classname
4.ID 选择器（ID selector）：#idname
5.属性选择器（Attribute selector）：[attr] [attr=value] [attr~=value] [attr|=value] [attr^=value] [attr$=valur] [attr*=value]
分组选择器
选择器列表（Selector list）
，是将不同的选择器组合在一起的方法，它选择所有能被列表中的任意一个选择器选中的节点。
语法：A, B
实例：div，span 会同时匹配 <span> 元素和 <div> 元素
组合器
1.后代组合器
(空格）组合器选择前一个元素的后代节点。
语法：A B
例子：div span 匹配所有位于任意 <div> 元素之内的 <span> 元素。
2.直接子代组合器
> 组合器选择前一个元素的直接子代的节点
语法：A>B
例子：ul > li 匹配直接嵌套在 <ul> 元素内的所有 <li> 元素。
3.一般兄弟组合器
~ 组合器选择兄弟元素，也就是说，后一个节点在前一个节点后面的任意位置，并且共享同一个父节点。
语法：A~B
例子：P ~ span 匹配同一个父元素下，<p> 元素后面的所有 <span> 元素
4.紧邻兄弟组合器
+ 组合器选择相邻元素，即后一个元素紧跟在前一个之后，并且共享同一个父节点。
语法：A+B
例子：h2 + p 会匹配所有紧邻在<h2>元素后的<p>元素。
5.列组合器（试验阶段）
|| 组合器选择属于某个表格行的节点。
语法：A || B
例子：col || td 会匹配所有 <col> 作用域内的 <td> 元素
伪选择器
1.伪类
：伪类选择器支持按照未被包含在文档树中的状态信息来选择元素
例子：a:visited 匹配所有曾被访问过的 <a> 元素
2.伪元素
：：伪选择器用于表示无法用HTML语义表达的实体。
例子：p::first-line 匹配所有<p>元素的第一行
优先级问题
浏览器通过优先级来判断哪些属性值与一个元素最为相关，从而在该元素上应用这些属性值。优先级是基于不同种类选择器组成的匹配规则。
选择器类型
下面列表中优先级递增：
1. 类型选择器（h1），伪类选择器（::before)
2. 类选择器（.example），属性选择器（[type="radio"]) , 和伪类(:hover)
3.ID选择器(#example)
*通配选择符(*),关系选择符(+, >, ~, ' ', | |), 否定伪类（:not()) 对优先级没有影响。【但是，:not()内部声明的选择器会影响优先级】
内联样式（style=“font-weight：bold”）总会覆盖外部样式表的任何样式，可看作最高级。
!important 例外规则
从技术上来讲，!important 与优先级无关。但是会覆盖其他任何声明。使用这不是一个好习惯，尽量要避免。所有优先考虑样式规则优先级解决问题。
一些经验法则：
- 一定要优化考虑使用样式规则的优先级来解决问题而不是
!important - 只有在需要覆盖全站或外部 CSS 的特定页面中使用
!important - 永远不要在你的插件中使用
!important - 永远不要在全站范围的 CSS 代码中使用
!important