• CSS理解样式表层叠


    在网页中,添加样式的方法有三种:嵌入式样式表,外部样式表和内联样式表。

    优先级算法按照先后顺序考虑一下三个方面:

      1.css规则的重要性和来源;

      2.css规则的特殊性;

      3.css规则在文档中出现的顺序;

    一、找到选择器匹配特定元素的所有声明;

    二、根据样式声明的重要性和来源进行优先级排序

      重要性有两种:带“!important”定义的声明和不带“!important”定义的声明。在CSS规则后添加!important的重要性要高于没有添加的。
      来源有三种样式:浏览器默认、开发人员定义的样式、用户在浏览器中定义的样式。
        重要性和来源的优先级排序从低到高是:
          1.浏览器默认样式
          2.用户在浏览器中定义样式中的normal规则
          3.开发人员定义的样式中的normal规则
          4.开发人员定义的样式中的important规则
          5.用户在浏览器中定义的important规则

    三、按照特殊性(Specificity)排序

      指定越详细的选择器将覆盖更一般的选择器。

      CSS将计算多个规则中指定每一个规则的选择器的特殊性值,值越高,优先级越高。

      特殊性值是一个由4个整数组成的一个类似数组的值:a,b,c,d,其中a的权重最高,依次类推,d的权重最低。

      计算方法:

      ①如果该规则是一条内联样式,那么a=1,否则a=0;

      ②如果该规则由选择器指定,选择器中出现的id选择器的数量就是b的值;

      ③如果该规则由选择器指定,选择器中出现的属性选择器(包括类选择器)或者伪类选择器的数量总和就是c的值;

      ④如果该规则由选择器指定,选择器中出现的元素选择器或者是伪元素选择器的数量总和就是d的值;

      ⑤通配符选择器*的特殊性值为0,0,0,0。

     由于a的权重最高,因此首先比较a,在a相同的情况,再比较b,依次类推。因此无论b,c,d值有多大,内联样式总是具有最高的特色性。

    四、比较CSS规则在文档中出现的顺序

      如果两条规则有相同的重要性、来源和特殊性值,那么,出现在后面的总是比出现在前面的具有更高的优先级。

  • 相关阅读:
    linux下网络排错与查看
    linux下判断网络是否连接
    Linux 下操作gpio(两种方法,驱动和mmap)
    Kernel 中的 GPIO 定义和控制
    springboot jpa 解决延迟加载问题
    Hibernate @OneToOne懒加载实现解决方案
    Hibernate缓存和懒加载的坑你知道多少?这5个简单问题回答不上来就不敢说会用hibernate
    Spring Boot JPA 懒加载
    Spring Boot中使用Spring-data-jpa让数据访问更简单、更优雅
    Spring Data Jpa 详解 (配置篇)
  • 原文地址:https://www.cnblogs.com/LisaY/p/4702937.html
Copyright © 2020-2023  润新知