博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
CSS权重及样式优先级问题
阅读量:4502 次
发布时间:2019-06-08

本文共 777 字,大约阅读时间需要 2 分钟。

  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 相同,后定义的优先。

转载于:https://www.cnblogs.com/haimengqingyuan/p/5453180.html

你可能感兴趣的文章
EasyRTSPClient:基于live555封装的支持重连的RTSP客户端RTSPClient
查看>>
EasyDarwin云存储方案调研:海康萤石云采用的是MPEG-PS打包的方式进行的存储
查看>>
MySQL巡检
查看>>
学习笔记之传说中的圣杯布局
查看>>
oh-my-zsh的使用
查看>>
共享内存的设计
查看>>
deque容器
查看>>
2017-2018-1 20155203 20155204 实验二 固件程序设计
查看>>
三方贸易-drop ship
查看>>
Android RenderScript 使用 Struct 及其下标的赋值
查看>>
【题解】BZOJ P1801 dp
查看>>
杂项-软件生命周期:软件生命周期
查看>>
小程序:小程序能力
查看>>
P1578 奶牛浴场 有障碍点的最大子矩形
查看>>
OpenCV学习:体验ImageWatch
查看>>
socket_循环接收消息
查看>>
I/O基础之概念
查看>>
各种算法的优缺点:
查看>>
poj 2513 Colored Sticks 字典树
查看>>
BZOJ 1266: [AHOI2006]上学路线route Floyd_最小割
查看>>