继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

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

aluckdog
关注TA
已关注
手记 307
粉丝 68
获赞 392

选择器

分类

  • *

  • .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节点的查找,得到很大的性能提高



作者:Eason_Wong
链接:https://www.jianshu.com/p/45f7234bf226

打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP