css层叠（cascade）

css层叠（cascade）

  • 找出所有对这个元素或者属性的样式声明
  • 通过important和origin对其进行排序（第一个权重最低）
    • user agent样式
    • user样式
    • author样式
    • author中带有!important的样式
    • user中带有!important的样式
  • 对同一important和来源进行排序。
    • 更多具体选择器的高于普通选择器的权重
    • 伪类元素和伪类等同于普通元素
    • ice计算原则
      • 选择符如果有个i(id),就在i的位置加1
      • 选择符如果有个c(class),就在c的位置加1
      • 选择符如果有个e(element),接在e的位置加1 demo
1
2
3
4
5
6
7
/*但是，千万得知道 0-1-12 与 0-2-0 相比，仍然是 0-2-0 的特指度更高。*/
p{}                                   //0-0-1 特指度=1
p.largetext{}                         //0-1-1 特指度=11
p#largetext{}                         //1-0-1 特指度=101
body p#largetext{}                    //1-0-2 特指度=102
body p#largetext ul.mylist{}          //1-1-3 特指度=113
body p#largetext ul.mylist li{}       //1-1-4 特指度=114
  • 对所有权重进行排序，如果有两个地方有相同的权重，则后面的覆盖前面的，

定义

  • author：来自文档的样式，也就是我们平时所写的代码
  • user:用户指定的样式文件，一些ua允许用户导入自定义样式表，例如ie（Internet 选项 -> 外观 -> 辅助功能 -> 用户样式表）
  • user agent :一些ua 例如浏览器自定义的某些样式