zoukankan      html  css  js  c++  java
  • css的特殊性笔记总结

    css 的特殊性也叫做css的权重。

        在css的选择器中,不同的选择器有不同的优先权也就是特殊性。选择器的特殊性由选择器本身的组件确定。特殊性值得表述为4个部分,如:0,0,0,0.

                (1)对于选择器中给定的各个ID属性值,加0,1,0,0。

                (2)对于选择器中给定的各个类属性值、属性选择或伪类,加0,0,1,0。

                (3)对于选择器中给定的各个元素和伪类,加0,0,0,1。

                (4)结合符合通配符选择器对特殊性没有任何贡献,也即是0,0,0,0。

                (5)继承的值根本没有特殊性,也就比0,0,0,0还要低。

           

      css解析时,都是从右到左解析选择器的,最右边的选择器越具体,其效率越高。通常#ID和.class前面不应加累赘的标签,否则影响到效率和权重。

     按照权重和来源排序

           在声明权重方面要考虑5级。权重由大到小的顺序依次为(重要声明是拥有!important):

                (1)读者的重要声明

                (2)创作人员的重要声明

                (3)创作人员的正常声明

                (4)读者的正常声明

                (5)用户代理声明

             如果两个规则中的权重、来源和特殊性完全相同,那么在样式表中后出现的一个会胜出.

           css2.1的层叠规则:

               (1)找出所有相关的规则,这些规则都包含与一个给定元素匹配的选择器。

               (2)按照显式权重对应用到该元素的所有声明排序。标志!important的规则的权重要高于没有!important标志的规则。

               (3)按照来源对应用到给定元素的所有声明排序。共有3种来源,创作人员,读者和用户代理。正常情况下,创作人员 > 读者模式 > 用户代理的默认样式。

               (4)按照特殊性对应用到给定元素的所有声明排序。有较高特殊性的元素权重要大于有较低的特殊性的元素。

               (5)按照出现的顺序应用到给定元素的所有声明排序。一个声明在样式表或文档中越后出现,它的权重就越大。如果样式表中右导入的样式表,一般认为出现在导入样式表中的声明在前,主样式表中的所有声明在后。

    ps:参考《css权威指南》

  • 相关阅读:
    &与&&的区别
    jsp之response方法
    一个数组先按照某个属性的大小排序,如果大小一样的就按照名称排序
    CSS内部div设置上min-height或max-height滚动条就会出现在父元素上
    300行代码手写简单vue.js,彻底弄懂MVVM底层原理
    JavaScript简单手写观察者模式
    javascript中replace还可以这样玩
    VUE中通过改变key去更新局部dom
    element中select的change方法如何传多个参数
    react打包中不想要sourceMap,但是在命令里加'GENERATE_SOURCEMAP=false'后windows下报错'GENERATE_SOURCEMAP' 不是内部或外部命令,也不是可运行的程序 或批处理文件。
  • 原文地址:https://www.cnblogs.com/hanbingljw/p/3537349.html
Copyright © 2011-2022 走看看