zoukankan      html  css  js  c++  java
  • 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规则在文档中出现的顺序

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

  • 相关阅读:
    二级菜单实现
    Python监控日志中经常访问的ip
    Python判断一个数是否为小数
    Python-读写文件
    python-字典
    Python实现屏蔽敏感词
    Python生成随机密码
    Python-列表和元组
    Jmeter命令行参数
    启动Jmeter时遇到的几种错误
  • 原文地址:https://www.cnblogs.com/LisaY/p/4702937.html
Copyright © 2011-2022 走看看