CSS学习笔记三——CSS选择器

选择器

分类

• *

• .class

• #id

• div

• div,p

• div p

• div>p

• div+p

• [attribute]

• [attirbute=‘123']

• [attribute~=‘123’]

• [attritube|=‘123’]

• :link :hover :active :visited :focus

• :before :after

• p:first-of-type (last, only，nth) 其父元素的第1/最后/唯一/n个p元素的所有p元素

• p:nth-（-last-）child(n) 其父元素的（顺序，倒序）第n个元素的所有p元素

• :root

• p:empty

• :disabled :checked

• :not(p)

优先级排序

计算法则

• 元素选择器： 1

• 类选择器：10

• ID选择器：100

• 内联： 1000

!important > 行内样式 > ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

匹配顺序

⚠️CSS选择器读取匹配顺序是从右向左的。

若从左向右的匹配，发现不符合规则，需要进行回溯，会损失很多性能。若从右向左匹配，先找到所有的最右节点，对于每一个节点，向上寻找其父节点直到找到根元素或满足条件的匹配规则，则结束这个分支的遍历。两种匹配规则的性能差别很大，是因为从右向左的匹配在第一步就筛选掉了大量的不符合条件的最右节点（叶子节点），而从左向右的匹配规则的性能都浪费在了失败的查找上面。

JQ的选择符匹配规则就是参考了css选择器读取规则来进行DOM节点的查找，得到很大的性能提高