[css] 请描述css的权重计算规则

权重值计算
选择器案例权重值
!important !important Infinity
内联样式 style="…" 1000
ID #id 100
class .class 10
属性 [type=‘text’] 10
伪类 :hover 10
标签 p 1
伪元素 ::first-line 1
相邻选择器、子代选择器、通配符 * > + 0
比较规则

1000>100。也就是说从左往右逐个等级比较，前一等级相等才往后比。
在权重相同的情况下，后面的样式会覆盖掉前面的样式。
继承属性没有权重值
通配符、子选择器、相邻选择器等的。虽然权值为0，但是也比继承的样式优先。
ie6以上才支持important，并且尽量少用它。

个人简介

我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易，
但坚持一定很酷。欢迎大家一起讨论

主目录

与歌谣一起通关前端面试题

[css] 请描述css的权重计算规则相关推荐

html内容权重计算,HTML CSS 选择器权重计算规则
其实,CSS有自己的优先级计算公式,而不仅仅是行间>内部>外部样式:ID>class>元素. 一.样式类型 1.行间我的行间CSS样式. 2.内联 h1{font-size: ...
[css] 请描述margin边界叠加是什么及解决方案
[css] 请描述margin边界叠加是什么及解决方案 1,使用padding代替,但是父盒子要减去相应的高度 2,使用boder(透明)代替(不推荐,不符合书写规范,如果父盒子子盒子时有颜色的不好处 ...
[css] 请描述下你对translate()方法的理解
[css] 请描述下你对translate()方法的理解 Single length/percentage value一个长度值或百分比表示X轴和Y轴使用一样的值进行二维上的平移.等同于transla ...
[css] 请使用css画一个圆，方法可以多种
[css] 请使用css画一个圆,方法可以多种 <div class="circle"></div>1.border-radius.cirlce{width ...
[css] 请使用css写一个多级的下拉菜单
[css] 请使用css写一个多级的下拉菜单 <!DOCTYPE html> <html lang="en"><head><meta ch ...
[css] 请用css写一个扫码的加载动画图
[css] 请用css写一个扫码的加载动画图 @Keyframes donut-spin { 0% { transform: rotate(0deg); } 100% { transform: rot ...
[css] 请使用CSS画一个带锯齿形边框圆圈
[css] 请使用CSS画一个带锯齿形边框圆圈 @import 个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论主目录与歌谣一起通关前端面试题
CSS 选择器权重计算规则
CSS 选择器(Selector)的权重(Specificity)决定了对于同一元素,到底哪一条 CSS 规则会生效.且仅有当多条 CSS 规则都对同一元素声明了相应样式时,才会涉及到权重计算的问题. ...
css选择器优先级权重计算规则
作用: 当多个选择器混合在一起使用时, 我们可以通过计算权重来判断谁的优先级最高权重大小: 1.内联样式,如: style="...",权值为1000. 2.ID选择器,如:#c ...

[css] 请描述css的权重计算规则

[css] 请描述css的权重计算规则

个人简介

主目录

[css] 请描述css的权重计算规则相关推荐

最新文章

热门文章