美文网首页
也来谈谈CSS层叠

也来谈谈CSS层叠

作者: 浩神 | 来源:发表于2018-11-17 01:21 被阅读23次

    网页最终呈现的样子是各种CSS声明最终叠加到一起的效果,我们以下面的HTML文档为例:

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Document</title>
      <style>
        h1 {
          font-size: 20px;
        }
      </style>
    </head>
    <body>
      <h1 style="font-size: 10px">h1 title</h1>
    </body>
    </html>
    

    稍微有点HTML和CSS基础的人都能看出,h1最终呈现的字体大小是10px,因为内联样式的优先级更高。

    h1的字体大小有3处声明

    打开Chrome开发工具,可以看到对h1的字体大小有三处声明。浏览器决定最终采用的哪个值,是通过各种考量的。各处声明的PK过程我们称之为层叠。PK的胜负由以下三个方面决定:

    1. 该元素的样式声明来自哪里(Origin: 来源)?
    2. 该声明的特殊性怎么样(specificity: 特殊性)?
    3. 这些声明谁先谁后(Order of Appearance: 出现先后)?

    我们下面对这三个方面逐一讨论。

    来源(Origin)

    这里的来源指的是CSS声明在哪里?CSS标准中将Origin分为三大主类:

    1. Author Origin。网站的开发人员自己写的样式
    2. User Origin。浏览网页的用户自己加的定制样式
    3. User agent Origin: 用户代理给的默认样式。比如开头的例子中Chrome给h1默认2em的字体大小。

    根据来源,浏览器评判出了声明的重要性(Importance)。评判标准很简单:

    1. 第一队列: User Agent设置了!important的重要性最高,User设置的!important 其次,较低的是Author的!important 声明。
    2. 第二队列: Author的普通申明;User的普通申明;User agent的普通申明。

    在层叠PK中,如果相同的选择器重要性不同,那么Origin这一层的PK就决出了胜负。

    如下例子:

    image

    在Origin这一层的PK中:

    1号是User的普通申明;
    2号选手是用户的!important声明;
    3号选手是User agent的普通声明
    所以 2号胜出 👏 👏 👏 👏

    Specificity(特殊性)

    如果两个属性的声明重要性不分上下,这时候该PK特殊性了,特殊性是对选择器而言的

    w3标准里面这样描述特殊性的计算:

    A selector’s specificity is calculated for a given element as follows:

    • count the number of ID selectors in the selector (= A)
    • count the number of class selectors, attributes selectors, and pseudo-classes in the selector (= B)
    • count the number of type selectors and pseudo-elements in the selector (= C)
    • ignore the universal selector

    翻译并自己组织语言如下:

    一个选择器的特殊性这样计算:

    统计ID选择器的数量(记为A)

    统计类选择器、属性选择器、伪类选择器的数量(记为B)

    统计元素选择器和伪元素选择器的数量(记为C)

    这里推荐一个在线计算选择器Specificity的网站:https://specificity.keegan.st/

    在线计算selector的specificity

    我们用一个三元组来记录一个选择器的特殊性,例如:

    ul    ---->  (0, 0, 1)
    ul, ul   ---->  (0, 0, 2)
    #list    ----> (1, 0, 0)
    #list #sub-list li  ---> (2, 0, 1)
    #list .list-item ---> (1, 1, 0)
    

    那么得到三元组之后怎么比较两个三元组的优先级呢?

    • 比较A,大的胜出
    • A相同,比较B,B大的胜出
    • 最后比较C

    同样举个🌰:

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Document</title>
      <style>
        h1 {
          color: green;
        }
    
        h1#title {
          color: red;
        }
    
        h1.title {
          color: blue;
        }
      </style>
    </head>
    <body>
      <h1 id="title" class="title">h1 title</h1>
    </body>
    </html>
    

    h1最终呈现的样子是红色:

    image

    在上面三条声明中,选择器对应的特殊性如下:

    选择器组 ID选择器数量 类或属性选择器数量 元素或伪类选择器数量 特殊性 结果
    h1#title 1 0 1 (1, 0, 1) 👏👏👏
    h1.title 0 1 1 (0, 1, 1) 💔
    h1 0 0 1 (0, 0,) 💔

    出现顺序(Order of Appearance)

    无需多言,前两轮PK没有结果的按照出场先后顺序后来居上,决定最终胜负。

    继承

    有CSS声明的元素退场了,没有CSS声明的只能靠继承或者默认样式了。

    某些样式声明会继承到子元素(如颜色、字体大小),有些则不会(如border等)。

    总结

    CSS 层叠是考虑样式来源、选择器的特殊性、以及继承来决定最终效果的过程。

    相关文章

      网友评论

          本文标题:也来谈谈CSS层叠

          本文链接:https://www.haomeiwen.com/subject/nhxbfqtx.html