CSS - 冲突时 Which Style Wins

更新日期: 2016-11-15 阅读次数: 4721 分类: CSS

CSS 冲突通常由两种情况引起

  1. 继承自不同祖先的样式
  2. 多个样式应用于同一个标签

对于第一种冲突,很好理解,nearest 祖先样式优先。

第二种冲突的实现很有趣,采用了打分机制。

一句话概括,即 tag 一分,class 十分,id 一百分,inline 一千分。得分高者胜!

例如:

  • p 得1分
  • .name p 得11分
  • #name p 得101分
  • #main #name p 得 1101分
  • #name .content p 得 111 分

最终 #main #name p 获胜!

但是假设两个 style 得分一样呢?例如,.name a 与 p .name 得分均为 11, 这时哪个在样式文件的后面,哪个样式胜出。

当然,以上列举的情况非常极端,我想除了脑子被驴踢了的,很少有人会写出这种样式。最简单的记忆方法是,selector 描述的越精确,style 的优先级越高。

BTW: 当了爹真不容易,自学个 CSS 还得到客厅摸黑掐点。

领取阿里云/腾讯云服务器优惠券

关于作者

我是来自山东烟台的一名开发者,喜欢瞎折腾,顺便记记笔记。有敢兴趣的话题,欢迎加微信 zhongwei 聊聊, 查看更多联系方式。 白天写程序,晚上哄熊孩子,可能回复有点慢,见谅。同时也欢迎关注我的微信公众号“大象工具”: 大象工具微信公众号

相关文章

爱评论不评论

近期节日

2020年12月01日 世界艾滋病日
2020年12月03日 国际残疾人日
2020年12月07日 大雪
2020年12月09日 "一二九"运动纪念日
2020年12月09日 世界足球日
2020年12月10日 世界人权日
2020年12月12日 西安事变纪念日
2020年12月13日 南京大屠杀
2020年12月20日 澳门回归日
2020年12月21日 国际篮球日
2020年12月21日 冬至
2020年12月24日 平安夜
查看更多节日