什么是CSS权重值？CSS权重值的优先级是什么？

什么是CSS的权重值？

1.权重决定了你css规则怎样被浏览器解析直到生效。css权重关系到你的css规则是怎样显示的。

2.当很多的规则被应用到某一个元素上时，权重是一个决定哪种规则生效，或者是优先级的过程。

3.每个选择器都有自己的权重。你的每条css规则，都包含一个权重级别。这个级别是由不同的选择器加权计算的，通过权重，不同的样式最终会作用到你的网页中。

4.如果两个选择器同时作用到一个元素上，权重高者生效。

权重的等级

可以把样式的应用方式分为几个等级，按照等级来计算权重

1、!important，加在样式属性值后，权重值为 10000（这个是最高的权重，所以在非必要情况下切勿加此代码！）

2、内联样式，如：style=””，权重值为1000

3、ID选择器，如：#content，权重值为100

4、类，伪类和属性选择器，如： content、:hover 权重值为10

5、标签选择器和伪元素选择器，如：div、p、:before 权重值为1

6、通用选择器（*）、子选择器（>）、相邻选择器（+）、同胞选择器（~）、权重值为0

权重的基本规则

1、相同的权重：以后面出现的选择器为最后规则（比如写了相同的两个样式 #content h1 {color:red} ）

2、不同的权重，权重值高则生效

3、！important（无限大）>行内样式（权重1000）>id选择器（权重100）>类选择器（10）=伪类选择器（10）=属性选择器（10）>元素选择器（1）>通用选择器（0）>继承的样式>浏览器默认的样式。

4、元素选择器相加永远没有类选择器的权重大。

什么是CSS权重值？CSS权重值的优先级是什么？相关推荐

CSS的继承、权值与层叠
2019独角兽企业重金招聘Python工程师标准>>> 笔者最近在细细学习前端方面的基础知识.以前对CSS布局的各式"花样"总是摸不着头脑,可以接受的就是abso ...
[css] 请描述css的权重计算规则
[css] 请描述css的权重计算规则权重值计算选择器案例权重值 !important !important Infinity 内联样式 style="-" 1000 ID ...
讲给后台程序员看的前端系列教程(19)——CSS的层叠性与继承性以及优先级
C语言自学完备手册(33篇) Android多分辨率适配框架 HTML5前端开发实战系列教程 MySQL数据库实操教程(35篇图文版) 推翻自己和过往--自定义View系列教程(10篇) 走出思维困境 ...
【CSS选择器】CSS选择器有哪些？如何选择合适的使用？各类选择器的优劣势是什么？
我们所熟知的CSS选择器有:通用选择器.标签选择器.id选择器.类选择器.群主选择器.关系型选择器.伪类选择器--本文会详细展开介绍CSS选择器类型.优劣势及其运用. CSS选择器 1.基础选择器 c ...
CSS学习笔记3：选择器及优先级
CSS选择器的类型: 标签选择器类选择器 ID选择器全局选择器群组选择器后代选择器 1.标签选择器: 以HTML的标签作为选择器,凡是选择了一个标签,那么所有这个标签的内容都是用了css样式 ...
css hack方法,CSS Hack的基本原理和实现方式
本文向大家简单介绍一下CSS Hack的基本原理和实现方式,有人说CSS hack是一种类似作弊的手段,以欺骗浏览器的方式达到兼容的目的,是用浏览器的兼容性差异来解决浏览器的兼容性问题,CSS hac ...
字体css样式在线,CSS Fonts(字体)
CSS Fonts(字体) CSS字体属性允许您为字体设置各种样式,例如文本的字体系列,大小和粗体,变体等. 字体属性在CSS样式为文本内容的字体,如提供几个属性:font-family,font- ...
CSS阅读笔记---CSS基础篇
本文是这些天阅读慕课网的css基础篇部分所作的笔记. 文章目录一.基本知识二.选择器 1.标签选择器 2.类选择器 3.ID选择器 4.子选择器 5.包含(后代)选择器 6.通用选择器 7.伪类选 ...
[学习笔记]最小割之最小点权覆盖最大点权独立集
最小点权覆盖给出一个二分图,每个点有一个非负点权要求选出一些点构成一个覆盖,问点权最小是多少建模: S到左部点,容量为点权右部点到T,容量为点权左部点到右部点的边,容量inf 求最小割即可. ...
vue css 应用变量_如何使用CSS Grid和CSS变量快速为应用创建原型
vue css 应用变量 CSS Grid and CSS Variables are both huge wins for front-end developers. The former make ...

什么是CSS权重值？CSS权重值的优先级是什么？

什么是CSS权重值？CSS权重值的优先级是什么？相关推荐

最新文章

热门文章