博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
css元素样式确定
阅读量:4676 次
发布时间:2019-06-09

本文共 845 字,大约阅读时间需要 2 分钟。

  话说,有这么一天,晨起,天气尚好,于是想着整理一下网页代码,都说减小网页代码量对于提速那是相当有效滴呀,看了看CSS代码页,心想,这些选择器这么明显的标着class,id~相信如此帅气聪明的浏览器君应该会明白我的,干脆把前缀全部删去吧,免得看着不美观~哈,突然觉得我特聪明,不过~结果让我彻底凌乱了~这页面被毁得,面目全非了,介个是为那般捏~好吧,回归主题:

  对于css选择器,浏览器君并非一眼望去,直接匹配的,因为层叠,严谨的它怎会如此草率呢,对于元素样式的确定,往往要在多个样式之间进行权衡,css通过层叠处理规则之间的冲突,层叠就是给每规则确定一个重要度:

    标有!important的用户样式 > 标有!important的网页制作者的样式 > 网页制作者样式 > 用户样式 > 浏览器样式。

  接下来就是对选择器特殊性的判断了,特殊性强的选择器样式优于特殊性相对弱的选择器样式,同等特殊性的选择器样式,后定义的样式优先。

  那特殊性如何确定呢?选择器特殊性分为4个等级,我们可以把它设为a,b,c,d,并把它们这样连起来:abcd,值大的特殊性大。

    a—该元素为行内样式时,a=1,否则a=0;

    b—b为ID选择器的总数;

    c—c为类,伪类,属性选择器的个数;

    d—的为类型选择器,伪元素选择器的个数;

  现在总算明白为何浏览器君不懂我的心了,如果将某个规则应用于一个元素而不发生效果,很有可能就是特殊性问题哦,这时应该考虑是否文档其他地方使用了更特殊的选择器,不要急急忙忙的将它定义为bug哦,可以试着在该选择器前加上父级的class、id,让该选择器更特殊,浏览器君会明白的~

  哦,忘了还有一点要注意的,浏览器君对于选择器的匹配是至右向左的,所以不要盲目的加一大堆父级class,父级的父级class......刚刚好就好~

转载于:https://www.cnblogs.com/pada/p/3688832.html

你可能感兴趣的文章
为什么需要Docker?
查看>>
国内5家云服务厂商 HTTPS 安全性测试横向对比
查看>>
how to control project
查看>>
转 python新手容易犯的6个错误
查看>>
第四节 -- 列表
查看>>
Python入门学习笔记4:他人的博客及他人的学习思路
查看>>
webstorm里直接调用命令行
查看>>
关联规则算法之FP growth算法
查看>>
对数组序列进行洗牌
查看>>
决策树
查看>>
团队作业
查看>>
如何避免在简单业务逻辑上面的细节上面出错
查看>>
win7,Ubuntu 12.04 双系统修改启动项顺序三方法
查看>>
python--列表推导式和生成表达式
查看>>
P - Psychos in a Line 单调队列
查看>>
POJ 2653 Pick-up sticks(计算几何)
查看>>
大型网站高并发的架构演变图-摘自网络
查看>>
8丶运行及总结
查看>>
Unity获取手机的电量时间
查看>>
Spring框架:Spring容器具体解释
查看>>