Comments (2)
1、初始工作
想要了解CSS的权重计算规则,首先需要先清楚两个概念。
(1)、权重: 权重是一个相对的概念,是针对某一指标而言的。某一指标的权重是指该指标在整体评价中的相对重要的程度。
(2)、权重系数,是表示某一项指标在指标项系统中的重要程度,它表示在其他指标不变的情况下,这一项指标的变化,对结果的影响。
2、CSS权重值系统
一般情况下,我们这么模拟CSS的权重值
* <span>等标签、::before伪元素等选择器 权重为 1;
* .class类、:hover伪类、a[id='123']属性选择器 等选择器权重为10;
* #id等id选择器,权重为100
* <span style="width:100px;"></span>等行内样式,权重为1000
* !important 权重高于行内样式
* 另外,通用选择器*、相邻选择器+、子选择器>、等选择器不在以上等级内 权重为0
3、比较规则规则
权值 = 第一等级选择器*个数,第二等级选择器*个数,第三等级选择器*个数,第四等级选择器*个数;
但是,低等级的选择器,个数再多也不会越级超过高等级选择器的优先级。
即:
* 先从高等级的进行比较,高等级的同时,再比较低等级的。
* 完全相同,后者优先,也就是样式覆盖。
*css后面加!important,无条件绝对优先。
4、题目答案
两个div内容的颜色都是蓝色。
from daily.
- css参与权重计算的内容:
- 样式类型:行间(行内) 样式,内联(内部)样式,(外联)外部样式。
- 选择器的类型:id,class,标签,*,属性,伪类,伪元素,子类选择器、相邻选择器。
- 权重计算规则:
- 最高优先级:无条件优先的属性只需要在属性后面使用!important。它会覆盖页面内任何位置定义的元素样式。
- 第一等:内联样式,如:style="color:red;",权值为1000。
- 第二等:ID选择器,如:#header,权值为0100。
- 第三等:类选择器、如:.header, 权值为0010。
- 第四等:类型(标签)选择器和伪元素选择器,如::after 权值为0001。
- 通配符,子选择器,相邻选择器等。如*,>,+, 权值为0000。
- 权重比较规则:
- 一般而言,选择器越特殊,它的优先级越高,也就是选择器指向的越准确,它的优先级就越高。并且是从左往右逐个等级比较,前一等级相等才往后比,权重从左往右依次相加。比如:
.example span {color:red;}
的选择器优先级是 10 + 1 也就是11;而.example .example_span{color:blue;}
的优先级是10 + 10 也就是20; - 但是如果完全相同,后者优先,也就是样式覆盖。比如:
.example_blue{color:blue} .example_red{color:red}
。<div class="example_blue example_red"></div>
与<div class="example_red example_blue"></div>
结果都为红色,如果两个样式先后互换,则均为蓝色。
- 一般而言,选择器越特殊,它的优先级越高,也就是选择器指向的越准确,它的优先级就越高。并且是从左往右逐个等级比较,前一等级相等才往后比,权重从左往右依次相加。比如:
- 问题答案:
从权重比较规则可以看出,上面的题目,属于二者权重完全相同,这时候后者渲染优先,即均为蓝色。
from daily.
Related Issues (20)
- 第二十三题:新窗口打开链接的方法是什么?那么如何使全站链接都打开新窗口? HOT 1
- 第二十四题:介绍一下HTML5中的ruby标签 HOT 2
- 第二十五题:new操作符都做了什么事情? HOT 2
- 第二十六题:你所在的团队有规范吗?举例说明都定义了哪些规范? HOT 1
- 第二十七题:用洗牌算法实现一个打乱数组的方法 HOT 3
- 第二十八题:实现数组的并、交、差、补集这四个方法 HOT 2
- 第二十九题:什么是链表? HOT 1
- 第三十题:两数相加
- 第三十一题:描述一下原型和原型链,以及之间的关系
- 第三十二题:什么是高阶函数? HOT 1
- 第三十三题:柯里化?
- 第三十四题:如何快速的适应新工作?
- 第三十五题:为什么不常用table和iframe这两个元素?
- 第三十六题:聊聊单元测试?
- 第三十七题:void 0 HOT 1
- 第三十八题:BEM 规范 HOT 1
- 第三十九题:Webpack的优缺点 HOT 1
- 第四十题:实现一个Promise HOT 1
- 第四十一题:TypeScript的优劣点 HOT 1
- 第四十二题:React 获取 ref 的方法都有哪些? HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from daily.