基础选择器
基础选择器是选择器的所有选择器的基本组成元素，也最简单，包含如下5个类别：
- ID选择器
- 标签选择器
- 类选择器
- 属性选择器：类选择器算是一个特殊的
属性选择器，通用的属性选择器举例如下：
#css代码
[href="http://www.baidu.com/"] {font-size: 12px;}
#html代码
<a href="http://www.baidu.com/>百度</a>"
- 通配选择器：就是特殊符号
*，一般不建议单独使用，因为这个匹配效率很低
组合选择器
- A B：后代选择器，A的所有儿子孙子等后代中匹配B的节点
- A > B：儿子选择器，只选A的儿子节点中匹配B的节点
- A + B：相邻兄弟选择器，A的兄弟选择器中的第一个满足B的兄弟节点，注意只选择第一个
- A ~ B: 普通兄弟选择器，跟B类似，只不过是所有满足B的兄弟节点，而不只是相邻的第一个
伪类选择器
最常见的选择器有如下几个类别：
- 跟鼠标有关的几个选项：
- link：还没有访问过的链接的状态
- visited：已经访问过的链接的状态
- hover：鼠标滑动到组件上面的时候的状态
- active：鼠标单击左键放下到松开左键这段时间的状态
- 跟聚焦有关的几个选项
- 这个类别主要是指表单的各种输入组件，当某个输入组件获得焦点的时候状态
- focus：当某个组件获得焦点
- focus-within：当所有的儿子孙子节点中有一个节点获得焦点的状态
- 跟节点动态选择的几个选项
- first-child：当一个节点是父亲所有直系儿子的第一个节点，且前面的匹配条件
- first-of-type：所有节点中第一个满足前面的匹配条件的节点，跟上面first-child的区别在于及时满足节点的条件不是_长子_也能匹配
- nth-child(an+b)；所有儿子节点都挑出来，逐个匹配前面的条件，如果匹配上了，在根据节点的offset信息进行(offste-b%a == 0)的判断，看是否能匹配上
1. 通过这个属性，我们可以设置第几个儿子节点(0n+b)，前几个儿子节点(-1n+b)，奇数(2n+1)或者偶数(2n)节点的选择；
1. 跟这个类似的还有nth-last-child：从后往前数的意思； - nth-of-type(an+b)：这个跟上面是类似的，唯一不同的是offset的算法，这个属性是先进行条件匹配，将节点进行一轮筛选过后的index再执行数值判断，感觉这个会比较常用；
1. 通过这个属性，我们可以设置第几个儿子节点，前几个儿子节点，奇数或者偶数节点的选择；
1. 跟这个属性类似的还会有first-of-type和last-of-type的属性 - 其他几个常见选项
- empty：当节点中内容为空，连空格都没有的时候，就能匹配
- target：当节点包含id，并且URL是通过http://host/params#id来访问的时候，该id对应的节点就能命中
- checked：用于radiobutton、checkbox、select选项当选项被选中的时候，就能命中
- enable/disable：当节点是enable或者disable的时候的就能命中
伪节点选择器
伪节点选择器常见的有如下几个：
- ::before：在指定元素的最前面创建一个子元素；
- ::after：在指定元素的最后面创建一个子元素；
- ::first-letter：指定元素的第一个字母；
- ::first-line：指定元素的第一行文字；
选择器优先级
如果某个HTML节点的某个属性命中了多个CSS的选择器，那么就需要一个冲突解决机制来确保到底使用哪个规则。
CSS的优先级选择有三个规则：
- 如果css的某个属性后面加了
!important的话，就一定会使用他，他是优先级最高的 - 如果都没指定
!important，就用精确度匹配算法计算出规则的优先级得分，得分高的使用 - 如果优先级得分一样，就采用出现在文本最后的那个规则，即跟文本的先后顺序相关
可以看到，如上三个规则中，最重要的就是第二个规则精确度匹配算法，该算法的大概逻辑如下：
首先，优先级算法有一个原则，就是精细度越高的规则，优先级就越高，比如id选择器 > 类选择器 > 标签选择器。
然后，由于一个选择器可能会有多个基础选择器组合而来的，所以需要有一个组合计算器的计算方法，计算方法如下：
priority_score =
100 * count(ID选择器) + // 百位数
10 * count(类选择器|属性选择器|伪类选择器) + // 十位数
1 * count(标签选择器|伪元素选择器) // 个位数
注意两点
- 在所有基础选择器当中，通配选择器、组合符合(>, +, ~)、以及否定伪类(div:not(.my_content)) 不参与到优先级计算当中；
- 属性选择器的例子，div[id="my_div"]，这个会按照属性参与，而不是ID选择器；且该选择器中，标签选择器和属性选择器计数都会+1；
