基础选择器

基础选择器是选择器的所有选择器的基本组成元素，也最简单，包含如下5个类别：

1. ID选择器
2. 标签选择器
3. 类选择器
4. 属性选择器：类选择器算是一个特殊的属性选择器，通用的属性选择器举例如下：
   

#css代码
[href="http://www.baidu.com/"] {font-size: 12px;}

#html代码
<a href="http://www.baidu.com/>百度</a>"

通配选择器：就是特殊符号*，一般不建议单独使用，因为这个匹配效率很低

组合选择器

1. A B：后代选择器，A的所有儿子孙子等后代中匹配B的节点
2. A > B：儿子选择器，只选A的儿子节点中匹配B的节点
3. A + B：相邻兄弟选择器，A的兄弟选择器中的第一个满足B的兄弟节点，注意只选择第一个
4. A ~ B: 普通兄弟选择器，跟B类似，只不过是所有满足B的兄弟节点，而不只是相邻的第一个

伪类选择器

最常见的选择器有如下几个类别：

1. 跟鼠标有关的几个选项：
2. link：还没有访问过的链接的状态
3. visited：已经访问过的链接的状态
4. hover：鼠标滑动到组件上面的时候的状态
5. active：鼠标单击左键放下到松开左键这段时间的状态
6. 跟聚焦有关的几个选项
7. 这个类别主要是指表单的各种输入组件，当某个输入组件获得焦点的时候状态
8. focus：当某个组件获得焦点
9. focus-within：当所有的儿子孙子节点中有一个节点获得焦点的状态
10. 跟节点动态选择的几个选项
11. first-child：当一个节点是父亲所有直系儿子的第一个节点，且前面的匹配条件
12. first-of-type：所有节点中第一个满足前面的匹配条件的节点，跟上面first-child的区别在于及时满足节点的条件不是_长子_也能匹配
13. nth-child(an+b)；所有儿子节点都挑出来，逐个匹配前面的条件，如果匹配上了，在根据节点的offset信息进行(offste-b%a == 0)的判断，看是否能匹配上
    1. 通过这个属性，我们可以设置第几个儿子节点(0n+b)，前几个儿子节点(-1n+b)，奇数(2n+1)或者偶数(2n)节点的选择；
    1. 跟这个类似的还有nth-last-child：从后往前数的意思；
14. nth-of-type(an+b)：这个跟上面是类似的，唯一不同的是offset的算法，这个属性是先进行条件匹配，将节点进行一轮筛选过后的index再执行数值判断，感觉这个会比较常用；
    1. 通过这个属性，我们可以设置第几个儿子节点，前几个儿子节点，奇数或者偶数节点的选择；
    1. 跟这个属性类似的还会有first-of-type和last-of-type的属性
15. 其他几个常见选项
16. empty：当节点中内容为空，连空格都没有的时候，就能匹配
17. target：当节点包含id，并且URL是通过http://host/params#id来访问的时候，该id对应的节点就能命中
18. checked：用于radiobutton、checkbox、select选项当选项被选中的时候，就能命中
19. enable/disable：当节点是enable或者disable的时候的就能命中

伪节点选择器

伪节点选择器常见的有如下几个：

1. ::before：在指定元素的最前面创建一个子元素；
2. ::after：在指定元素的最后面创建一个子元素；
3. ::first-letter：指定元素的第一个字母；
4. ::first-line：指定元素的第一行文字；

选择器优先级

如果某个HTML节点的某个属性命中了多个CSS的选择器，那么就需要一个冲突解决机制来确保到底使用哪个规则。

CSS的优先级选择有三个规则：

1. 如果css的某个属性后面加了!important的话，就一定会使用他，他是优先级最高的
   
2. 如果都没指定!important，就用精确度匹配算法计算出规则的优先级得分，得分高的使用
   
3. 如果优先级得分一样，就采用出现在文本最后的那个规则，即跟文本的先后顺序相关

可以看到，如上三个规则中，最重要的就是第二个规则精确度匹配算法，该算法的大概逻辑如下：

首先，优先级算法有一个原则，就是精细度越高的规则，优先级就越高，比如id选择器 > 类选择器 > 标签选择器。

然后，由于一个选择器可能会有多个基础选择器组合而来的，所以需要有一个组合计算器的计算方法，计算方法如下：

priority_score = 
    100 * count(ID选择器) + // 百位数
    10  * count(类选择器|属性选择器|伪类选择器) + // 十位数
    1   * count(标签选择器|伪元素选择器) // 个位数

注意两点

1. 在所有基础选择器当中，通配选择器、组合符合(>, +, ~)、以及否定伪类(div:not(.my_content)) 不参与到优先级计算当中；
2. 属性选择器的例子，div[id="my_div"]，这个会按照属性参与，而不是ID选择器；且该选择器中，标签选择器和属性选择器计数都会+1；

链接: https://www.fly63.com/article/detial/2764