zoukankan      html  css  js  c++  java
  • CSS选择器优先级的计算方式

    1.css选择器的优先级简单的权重相加吗?

      -显然不是

      -我们可以看到或听到很多人对于css选择器优先级的计算都是使用了所谓的权重相加,行间样式权重为1000?,id选择器权重为100?,class/属性/伪类选择器权重为10?,标签/伪元素选择器权重为1?,通配符为0?,然后把所有的权重相加,权重更大的优先级更高,权重相等的,后面的覆盖前面的样式,尽管从表面看没有什么问题,但这种计算优先级的方式显然是错误的。

    2.怎样正确计算css选择器的优先级?

      -w3c官网链接:第16条,计算选择器的特异性https://www.w3.org/TR/selectors/#specificity

      -对于给定元素,选择器的特异性计算如下:

        -计算选择器中ID选择器的数量(= A)

        -计算选择器中的类选择器,属性选择器和伪类的数量(= B)

        -计算类型选择器和选择器中的伪元素的数量(= C)

        -忽略通用选择器

      -最终的特异性用 (A,B,C) 表示

      -如果选择器是选择器列表,则为列表中的每个选择器计算此数字。对于针对列表的给定匹配过程,有效的特异性是列表中最匹配的选择器的特异性。

    3.通过按顺序比较这三个组成部分来比较特异性:A值越大的特异性越具体;如果两个A值绑定在一起==(两个A值相同),则B值越大的特异性越具体。如果两个B值也绑定在一起==(两个B值相同),则C值越大的特异性越具体。如果所有值都绑定在一起==(A,B,C值都相同),则两个特异性相等。

    4.谁的特异性大,就会应用谁的样式,如果特异性相同,则后面的样式会覆盖前面的。

    5.由于存储限制,实现可能会限制A,B或C的大小。如果是这样,则必须将高于限制的值限制在该限制内,并且不要溢出。

    例如:
        #a .b{}        //A=1,  B=1, C=0
        .a.b.c.d.e.f.g.h.i.j.k.l.m.n {}     //A=0,  B=14, C=0
        //显然第一个的特异性更大,自然会应用第一个的样式
    

     

    本文转载自 正确的CSS选择器优先级的计算方式

    学识浅薄,如有错误,恳请斧正,在下不胜感激。

  • 相关阅读:
    C#之正则表达式、异常处理和委托与事件
    C#之interface接口
    C#之类与对象
    C#第一次的Hello World
    第一次用博客
    用Visual Studio 2012+Xamarin搭建C#开发Andriod的环境
    cocos2dx 3.x for lua "异步加载"实现过程
    cocos2dx 3.x c++代码打包给lua调用过程(mac)
    cocos2dx 3.x lua 网络加载并且保存资源(unix、linux)
    path类和directory类对文件的路径或目录进行操作
  • 原文地址:https://www.cnblogs.com/yin-jie/p/13824556.html
Copyright © 2011-2022 走看看