CSS权重及样式优先级问题
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 相同,后定义的优先。
CSS权重及样式优先级问题的更多相关文章
- CSS - 权重,样式优先级
关于CSS权重,一套计算公式来去计算,就是 CSS Specificity,我们称为CSS 特性或称非凡性,它是一个衡量CSS值优先级的一个标准. 遇到样式应用问题,计算一下权重就知道优先级. 具体规 ...
- 关于css里决定样式优先级的权重
最近学css样式,优先级有点繁琐,简单记录一下. css中的优先级规则为: 有!important的最优先: 其次权重高的优先: 权重相同则后定义优先,会覆盖前面的. 至于权重: #id 为100: ...
- 前端学习笔记——引入css文件、样式优先级
CSS样式的引用方式有三种:行间样式表>内部样式表>外部样式表. 如果只有一种样式,那么优先级“由内到外 由近到远” 1.行间样式表--内联方式 内联方式指的是直接在 HTML 标签中的 ...
- css调试与样式优先级
如何查看一个标签的当前css样式 如上图所示 先用标签选择器选择某个标签 然后在elements区域就会自动找到该标签 然后在右侧的styles区域整个区域都是该标签的样式,从上到下是显示的优先级,被 ...
- 权重和层叠规则决定了CSS样式优先级
一.基本的优先级规则 比较同一级别的个数,数量多的优先级高,如果相同即比较下一级别的个数,至于各级别的优先级如下: important > 内联 > ID > 类 > 标签 | ...
- css样式优先级和权重问题
内联样式: <div style="font-size: 12px;">姓名</div> 外部样式: <link rel="styleshe ...
- CSS样式优先级和权重问题(部分)
内联样式: <div style="font-size: 12px;">姓名</div> 外部样式: <link rel="styleshe ...
- css样式权重优先级,css样式优先级
原文:http://www.bkjia.com/Javascri... 样式选择器权重优先级: important > 内嵌样式 > ID > 类 > 标签 | 伪类 | 属性 ...
- CSS:权重和层叠规则决定了其优先级
首先,给大家看一篇关于CSS优先级的示例:http://www.ido321.com/76.html 一.基本的优先级规则 比较同一级别的个数,数量多的优先级高,如果相同即比较下一级别的个数,至于各级 ...
随机推荐
- 关于thenao.scan() fn函数参数的说明
theano.scan()原型: theano.scan( fn, sequences=None, outputs_info=None, non_sequences=None, n_steps=Non ...
- Android Studio 入门指南
转载: 原文链接:http://www.codeceo.com/article/android-studio-guide.html 写在前面 作为一个Android 开发者,你应该很了解Android ...
- 《zw版·Halcon-delphi系列原创教程》 酸奶自动分类脚本(机器学习、人工智能)
<zw版·Halcon-delphi系列原创教程>酸奶自动分类脚本(机器学习.人工智能) Halcon强大的图像处理能力,令人往往会忽视其内核,是更加彪悍的机器学习.人工智能. ...
- Qt之重写QLabel类
在mylabel.h 文件中#ifndef MYLABEL_H#define MYLABEL_H #include <QLabel>/*重新实现QLabel类,使其支持点击事件*/clas ...
- 文件上传插件uploadify详解
官网:http://www.uploadify.com/ 基于jquery的文件上传控件,支持ajax无刷新上传,多个文件同时上传,上传进行进度显示,删除已上传文件. 要求使用jquery1.4或以上 ...
- Json.net对于导航属性的处理(解决对象循环引用)
对于两张表A.B多对多的关系中,A的导航属性中有B,B的导航属性中有A,这样Json.net对A或者B对象序列化时会形成死循环 所以对于导航属性要加标签 首先在A.B实体类工程(Model)中引用Js ...
- redmine设置
接上篇. 1.redmine新版本已经比较强大了,可以定制所有字段(含标准字段和自定义字段)的读写属性.这里为了避免字段过多影响用户感受,希望增加功能将不相关的字段屏蔽,下载插件Workflow Hi ...
- [转]关于 initWithNibName 和 loadNibNamed 的区别和联系
转载地址:http://jianyu996.blog.163.com/blog/static/1121145552012102293653906/ 关于 initWithNibName 和 loadN ...
- HDU 4944 FSF’s game 一道好题
FSF’s game Time Limit: 9000/4500 MS (Java/Others) Memory Limit: 131072/131072 K (Java/Others)Tota ...
- Android动画View Animation
Animations 一.Animations介绍 Animations是一个实现android UI界面动画效果的API,Animations提供了一系列的动画效果,可以进行旋转.缩放.淡入淡出等, ...