css 取偶数节点_css节点选择器

基础选择器

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

ID选择器

标签选择器

类选择器

属性选择器：类选择器算是一个特殊的属性选择器，通用的属性选择器举例如下：

#css代码

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

#html代码

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

组合选择器

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；