css权重计算

CSS属性选择器权重

1. 选择器类型

• Basic Selectors

   element(标签) selector：span、p...
   
   class selector：
           span.classy {
               background-color: DodgerBlue;
           }
           <span class="classy">Here</span>
   ID selector:
           span#identified {
               background-color: DodgerBlue;
           }
           <span id="identified">Here</span>
           
   Universal通配选择器：
           *.warning {color:red;}
           <p class="warning">
               <span lang="en-us">A green span</span> in a red paragraph.
           </p>
           <p id="maincontent" lang="en-gb">
               <span class="warning">A red span</span> in a green paragraph.
           </p>
           
   Attribute属性选择器：
           // 存在href属性并且属性值以"#"开始的<a> 元素
           a[href^="#"] {
               background-color: gold;
           }
           // 包含"example"的<a>
           a[href*="example"] {
               background-color: silver;
           }
           // 包含"insensitive"的<a>, i 表示忽略"insensitive"的大小写
           a[href*="insensitive" i] {
               color: cyan;
           }
           // 结尾是".org"的<a> 
           a[href$=".org"] {
               color: red;
           }
           
           <ul>
                 <li><a href="#internal">Internal link</a></li>
                 <li><a href="http://example.com">Example link</a></li>
                 <li><a href="#InSensitive">Insensitive internal link</a></li>
                 <li><a href="http://example.org">Example org link</a></li>
           </ul>
  

• Combinators 关系选择器

    Adjacent sibling combinator 相邻兄弟选择器 (+)：
        两个选择器之间，第二个元素在第一个元素之后，
        两个元素属于同一个父元素的子元素，
        第二个元素将被选中。
        li:first-of-type + li {
            color: red;
        }
        <ul>
            <li>One</li>
            <li>Two!</li>
            <li>Three</li>
        </ul>
    
    General sibling combinator 通用兄弟选择器：
        <div/> 后的所有同级 <span/>
        div ~ span {}
    Child combinator 子选择器：
        直接子元素
        div > span {}
    Descendant combinator 后代选择器：
        所有后代元素 
        div span {}
  

• Pseudo-classes 伪类选择器

    a:link { } /* 未访问链接 */
    a:visited { } /* 已访问链接 */
    a:hover { } /* 用户鼠标悬停 */
    a:active { } /* 激活链接 */
    
  

• Pseudo-elements 伪元素选择器

    ::-moz-progress-bar 是<progress> 元素中的关于进度条的Mozilla特性
    
    ::before 创建一个伪元素，它将成为匹配选中的元素的第一个子元素。
             常通过 content 属性来为一个元素添加修饰性的内容。
             属于行内元素。
    ::first-letter、::first-line、::after、::slotted
    
    /* CSS3 语法 */
    element::before { 样式 }  
    
    /* （单冒号）CSS2 过时语法 (仅用来支持 IE8) */
    element:before  { 样式 }  
    
    /* 在每一个p元素前插入内容 */
    p::before { content: "Hello world!"; } 
    
    CSS3 引入 ::before  是为了将伪类和伪元素区别开来。浏览器也接受由 CSS2 引入的 :before 写法。
  

A B C D

A:style属性（内联样式），有一个记为1，依次累加，表示为：1，0，0，0

B:ID 选择器（#header），有一个记为1，依次累加，表示为： 0, 1, 0, 0

C: class、 atrribute 属性、 pseudo-classes 伪类选择器、 有一个记为1，依次累加，表示为：0，0，1，0

D: pseudo-element 伪元素 、element 标签，有一个记为1，依次累加，表示为：0，0，0，1

(universal selector)、+、>、~ 不会增加权重

CSS2规范中规定：!important 用于单独指定某条样式中的单个属性。对于被指定的属性，有 !important 指定的权重值大于所有未用 !important 指定的规则。

Tips1: 如果多条规则中都对同一个属性指定了 !important 呢？这时候 !important 的作用相互抵销，依然按照ABCD四组计算比较。

Tips2: edge 浏览器所有的类名(classes) 可能是8字节字符串存储的。对字节稍稍了解的人都知道，8字节所能hold的最大值就是255. 所以你想啊，当同时出现256个class, 势必会越过其边缘，溢出到id区域， 所以导致class 会覆盖 id

参考0.0