• [05] css优先级


    1.优先级计算规则(特殊性)

    在css中,有不同的方式编写css,如果想给同一个标签设置样式,选择器的写法有很多种,那么当多个样式都应用于同一个标签,标签优先选择哪个样式呢?按照以下规则:

    现有 0,0,0,0 四个位置

    第一个0位置: 表示内联样式(标签上的style属性)1,0,0,0

    第二个0位置: 表示id选择器 0,1,0,0

    第三个0位置: 表示类选择器,属性选择器或伪类 0,0,1,0

    第四个0位置: 表示标签和伪元素 0,0,0,1

    1.1实例

    一个样式的位置优先级最终由选择器计算出来的总分最高的匹配,例如下面的实例:

    // 0,0,0,1
    h1 {
        color: red;
    }
    //0,0,0,2
    p h1 {
        color: blue;
    }
    //0,0,1,0
    .h1Class {
        font-size: 12px;
    }
    //0,0,1,0
    *.h1Class {
        font-size: 20px;
    }
    //0,0,2,2
    p.h1Class em.dark {
        color: maroon;
    }
    //0,1,0,0
    #pId {
        color: yellow
    }
    // 0,1,1,1
    div#h1Class *[href] {
        color: silver;
    }
    // 0.0.1.7 (这里的id属性选择器只贡献了0.0.1.0,和id选择器不一样)
    html > body table tr[id='totals'] td url > li {
    color: maroon;
    }

    当多个选择器样式不冲突的时候,会合并样式应用到标签。

    1.2 重要性

    当某个样式非常重要,可以使用!important标记。大于上面计算方式的一切样式.下面的样式颜色为蓝色

    <h1 style="color:red;">hello</h1>
    
    //css
    h1 {
        color: blue!important;
    }
    

    2.样式层叠后的优先级

    2.1 用户代理三种css来源

    我们先弄清楚创作人员,读者和用户代理三种css来源。

    创作人员(author's+style):如果你是一个前端开发者,那么你写的那些样式就叫做创作人员样式。

    用户代理样式(agent's+style),用户代理也就是我们通常所说的浏览器(IE、Firefox等等),这些浏览器会提供一些默认的样式,比如IE浏览器中,一个纯粹由html代码构成的网页里,我们会发现超链接会带有一个蓝色的前景色,这其实就用户代理样式,借用一些插件我们可以方便的查看这些默认样式(比如Firefox中的Web+developer
    读者样式(reader's+style):所谓读者自然就是浏览网页的用户,有些时候这些用户里可能会有人不满意网页的配色,或者字体大小,这时候他们就是通过浏览器提供的接口为网站添加读者样式。

    2.2 层叠优先级判断

    1.找到应用于同一个元素的所有css规则

    2.按照权重排序, 标志!important最高,没有!important的情况,创作人员> 读者样式>用户代理。下面是权重由高到低

       a.读者的重要声明(!important)

       b.创作者的重要声明(!important)

       c.创作者的正常声明

       d.读者的正常声明

       e.用户代理声明

    3.当上面的计算方式结果一样,按照特殊性(特殊性的优先计算规则)排序

    <p id="bright">hello,world</p>
    
    //权重排序:都是创作者,但是特殊性0,1,0,1
    p#bright {
        color: silver;
    }
    //权重排序:都是创作者,但是特殊性0,0,0,1
    p {
        color: black;
    }

    4.按出现顺序,越在后面的,权重越大

    //例1: 两个规则的权重,来源和特殊性完全相同,那么谁在后面则胜出
    
    //失败
    h1 {
        color: silver;
    }
    //胜出
    h1 {
        color: blue;
    }
    // 例2: a链接的伪元素选择器方式。权重,来源和特殊性都是一样的。特殊性为0,0,1,0,因此在点击‘未访问’的链接时,匹配:link,:hover,:active,而最后一个胜出
    
    :link { color: blue;}
    :visited { color: purple;}
    :focus: { color: black;}
    :hover { color: red;}
    :active { color: orange}
    
    
    //按照这种顺序不会显示:hover或:active的样式。因为:link和:visited出现在后面。链接要么是已访问,要么是未访问,所以:link :visted会覆盖:hover的规则
    :active { color: orange}
    :focus: { color: black;}
    :hover { color: red;}
    :link { color: blue;}
    :visited { color: purple;}

      

  • 相关阅读:
    第二次作业——结对项目之需求分析与原型模型设计
    第三次作业——结对编程
    采用PowerDesigner 设计数据库
    关于Android开发环境的演变
    广东地区DNS再次瘫痪
    SQL Server 2005 TSQL 中的OUTPUT子句语法
    Visual Studio 里的版本兼容问题
    Javascript 对象扩展积累
    IBatisNet.DataMapper 升级到 1.6.2 之后报错
    ExtJs Extender controls 不错的例子
  • 原文地址:https://www.cnblogs.com/yeziTesting/p/8067391.html
Copyright © 2020-2023  润新知