zoukankan      html  css  js  c++  java
  • CSS权重及样式优先级问题

    1. CSS权重值计算

      一条样式规则的整体权重值包含四个独立的部分:[A, B, C, D];

     (1) A 表示内联样式(写在标签的style属性中),只有 1 或者 0 两个值;对于内联样式,由于没有选择器,所以 B、C、D 的值都为 0,即 A=1, B=0, C=0, D=0(简写为 1,0,0,0,下同)。

     (2)B 表示规则中 ID 的数量;(如,#header 这样的选择器,计算为 0, 1, 0, 0)。

     (3)C 表示规则中除了 ID、标签和伪元素以外的其它选择器数量,包括类选择器、属性选择器等;(如, .logo[id='site-logo'] 这样的选择器,计算为 0, 0, 2, 0)。

     (4)D 表示规则中标签和伪元素的数量;(如,p:first-letter 这样的选择器,计算为0, 0, 0, 2)。

     

    2. CSS样式优先级

      !important > 内联 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 通配符 > 继承!!! 根据 CSS 规范,具体性越明确的样式规则,权重值越高。

     (1)有 !important标记的属性权重值无视没用!important 指定的一切情况;

     (2)多次指定 !important  时,相互抵销。

     (3)inherit而来的属性定义,优先级低于任何直接指定的属性值。

     

    3.  CSS权重值比较

    • 根据规范,计算权重值时,A, B, C, D 四组值,从左到右,分组比较,从高位到低位(从 A 到 D)分别比较,高位相同才需要比较低位,即如果 A 相同,比较 B, 如果 B 相同,比较 C, 如果 C 相同,比较 D, 如果 D 相同,后定义的优先。

    宝剑锋从磨砺出,梅花香自苦寒来。
  • 相关阅读:
    racktable安装过程
    racktables
    EM上的按钮是方框的问题
    install oracle
    记一次ORACLE无法启动登陆事故
    安装rlwrap-0.37.tar.gz
    centos7 安装oracle 11g数据库
    centos 7 安装mariadb
    centos7 lamp
    Linux安全之SSH 密钥创建及密钥登录
  • 原文地址:https://www.cnblogs.com/haimengqingyuan/p/5453180.html
Copyright © 2011-2022 走看看