zoukankan      html  css  js  c++  java
  • CSS 优先级计算

    CSS 的优先级是根据样式声明的特殊值来判断的。

    选择器的特殊值分为四个等级,如下:

    1. 内联样式 1,0,0,0
    2. ID 选择器 0,1,0,0
    3. 类选择器/属性选择器/伪类选择器 0,0,1,0
    4. 元素和伪元素选择器 0,0,0,1

    或者更加直观一点概括为 6 个,包括以下两个:

    1. !important 1,0,0,0,0
    2. 通配符选择器 0,0,0,0

    计算方法:

    • 每个等级的初始值为 0
    • 每个等级的叠加为选择器出现的次数相加
    • 不可进位,比如 0,99,99,99
    • 依次表示为:0,0,0,0
    • 每个等级计数之间没有关联
    • 等级判断从左向右,如果某一位数值相同,则判断下一位数值。
    • 如果两个优先级相同,则最后出现的优先级高,!important 也适用。
    • 通配符选择器的特殊值为:0,0,0,0
    • 继承样式优先级最低,通配符样式优先级高于继承样式。
    • !important(权重),它没有特殊值,但它的优先级是最高的,为了方便记忆,可以认为它的特殊值为 1,0,0,0,0

    注意:

    1. 样式应用时,CSS 会先查看规则的权重(!important),加了权重的优先级最高,当权重相同时,会比较规则的特殊性。
    2. 特殊性值越大的声明优先级越高。
    3. 相同特殊值的声明,根据样式引入的顺序,后声明的规则优先级高(距离元素出现最近的)
    4. 部分浏览器由于字节溢出问题出现的进位表现不做考虑。
  • 相关阅读:
    稀疏数组
    队列
    链表

    递归
    排序
    查找
    postman设置环境变量
    postman获取全局
    iframe页面刷新问题
  • 原文地址:https://www.cnblogs.com/xiaoyucoding/p/13287175.html
Copyright © 2011-2022 走看看