基础选择器
基础选择器是选择器的所有选择器的基本组成元素,也最简单,包含如下5个类别:
ID选择器
标签选择器
类选择器
属性选择器:类选择器算是一个特殊的属性选择器,通用的属性选择器举例如下:
#css代码
[href="http://www.baidu.com/"] {font-size: 12px;}
#html代码
通配选择器:就是特殊符号*,一般不建议单独使用,因为这个匹配效率很低
A + B:相邻兄弟选择器,A的兄弟选择器中的第一个满足B的兄弟节点,注意只选择第一个
A ~ B: 普通兄弟选择器,跟B类似,只不过是所有满足B的兄弟节点,而不只是相邻的第一个
这个类别主要是指表单的各种输入组件,当某个输入组件获得焦点的时候状态
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的属性
target:当节点包含id,并且URL是通过http://host/params#id来访问的时候,该id对应的节点就能命中
checked:用于radiobutton、checkbox、select选项当选项被选中的时候,就能命中
enable/disable:当节点是enable或者disable的时候的就能命中
如果某个HTML节点的某个属性命中了多个CSS的选择器,那么就需要一个冲突解决机制来确保到底使用哪个规则。
如果css的某个属性后面加了!important的话,就一定会使用他,他是优先级最高的
如果都没指定!important,就用精确度匹配算法计算出规则的优先级得分,得分高的使用
如果优先级得分一样,就采用出现在文本最后的那个规则,即跟文本的先后顺序相关
可以看到,如上三个规则中,最重要的就是第二个规则精确度匹配算法,该算法的大概逻辑如下:
首先,优先级算法有一个原则,就是精细度越高的规则,优先级就越高,比如id选择器 > 类选择器 > 标签选择器。
然后,由于一个选择器可能会有多个基础选择器组合而来的,所以需要有一个组合计算器的计算方法,计算方法如下:
10 * count(类选择器|属性选择器|伪类选择器) + // 十位数
1 * count(标签选择器|伪元素选择器) // 个位数
在所有基础选择器当中,通配选择器、组合符合(>, +, ~)、以及否定伪类(div:not(.my_content)) 不参与到优先级计算当中;
属性选择器的例子,div[id="my_div"],这个会按照属性参与,而不是ID选择器;且该选择器中,标签选择器和属性选择器计数都会+1;