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规则在文档中出现的顺序

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

  • 相关阅读:
    Algs4-1.1.17找出以下递归函数的问题
    Algs4-1.1.16给出exR1(6)的返回值
    Algs4-1.1.15编写一个静态方法histogram()
    Algs4-1.1.14实现以2为底的对数
    Algs4-1.1.13编写一段代码,打印出一个M行N列的二维数组的转置(交换行和列)
    Algs4-1.1.12以下代码段会打印出什么结果?
    python将一个列表的元素随机打乱
    python 类似java的三目运算符
    java的三元运算符
    java 的Colections类(Java也有python类似列表的反转、排序等方法)
  • 原文地址:https://www.cnblogs.com/LisaY/p/4702937.html
Copyright © 2011-2022 走看看