在css中，权重相当于优先级，优先级高的css样式会覆盖优先级低的样式，优先级越高也代表着权重越高。当css选择规则的权重不同时，权值高的优先。当css选择规则的权值相同时，后定义的规则优先。

一、css优先级的6大分类

通常可以将css的优先级由高到低分为6组：

第一优先级：属性后面使用！important。它会覆盖页面内其他位置定义的元素样式。

第二优先级：在html中给元素标签加style，即内联样式/行内样式。（style="…"）

第三优先级：由一个或多个id选择器来定义。 (#box{…})

第四优先级：由一个或多个类选择器、属性选择器、伪类选择器定义。 (.classname{…})

第五优先级：由一个或多个类型选择器定义。（div{…}）

第六优先级：通配选择器。 (*{…})

二、权重的4个等级定义

我们把特殊性分为4个等级，每一个等级代表一类选择器，每个等级的值相加得出选择器的权重。

4个等级的定义如下：

第一等级：代表内联样式，如style="…"，权值为 1000

第二等级：代表id选择器，如#box{…}，权值为100

第三等级：代表类，伪类和属性选择器，如.classname{…}，权值为10

第四等级：代表标签选择器和伪元素选择器，如div{…}，权值为1

注意：1、!important 的权重是无穷大，无条件优先。

2、继承与通配选择器的权重是0。

三、优先顺序

！important > 行内样式 > ID选择器 > 类选择器 > 标签选择器 > 通用选择器

CSS 的权重和优先级相关推荐

css选择器权重与优先级
一:优先级第一优先级:css属性+!important 拥有最高优先级第二优先级: 给标签加style,及内联样式权值1000 第三优先级: id选择器,#id{} ...
CSS权重与优先级-详细分析
本文总结内容: CSS 的权重与优先级相关问题我们有没有被 CSS 权重以及优先级相关的问题困扰过; 虽然我们一直在使用 CSS 来实现我们的页面效果, 但是对于这些概念都是很模糊的; 这里就来为大 ...
html css控制优先级,css权重及优先级问题_html/css_WEB-ITnose
css权重及优先级问题几个值的对比初始值指定值计算值应用值 CSS属性的指定值 (specified value)会通过下面3种途径取得: 在当前文档的样式表中给这个属性赋的值,会被优先使 ...
html盒子优先级设置,CSS 基础(盒模型、选择器、权重、优先级)
层叠样式表(Cascading Style Sheets) 盒模型盒模型包含四部分:margin.border.padding.content.如果不使用doctype声明,浏览器默认使用自己的模式 ...
CSS选择器权重计算与优先级
CSS选择器权重计算与优先级选择器有优先级,可以通过权重来计算优先级. 一:优先级等级划分: 第一优先级:css属性+!important是一种强制改变优先级的方法,它会覆盖页面内任何位置定义的元 ...
面试总结（CSS 的盒模型？、CSS 中选择器的优先级以及 CSS 权重如何计算？、CSS 中哪些属性可继承，哪些不可以？、CSS 单位中 px、em 和 rem 的区别？、rem 适配....)
CSS 的盒模型? 盒子模型(Box Modle)可以用来对元素进行布局,包括内边距,边框,外边距,和实际内容这几个部分第一种是 W3C 标准的盒子 ...
html内容权重计算,HTML CSS 选择器权重计算规则
其实,CSS有自己的优先级计算公式,而不仅仅是行间>内部>外部样式:ID>class>元素. 一.样式类型 1.行间我的行间CSS样式. 2.内联 h1{font-size: ...
html之CSS设计（CSS伪类、优先级、字体属性、背景属性）
文章目录一.CSS伪类二.CSS优先级三.CSS属性 1.CSS颜色设置 2.颜色属性 3.背景属性本篇文本主要介绍html编程中的CSS伪类.优先级.字体属性.背景属性,前两种是CSS选择器 ...
[css] 请描述css的权重计算规则
[css] 请描述css的权重计算规则权重值计算选择器案例权重值 !important !important Infinity 内联样式 style="-" 1000 ID ...

CSS 的权重和优先级

一、css优先级的6大分类

二、权重的4个等级定义

三、优先顺序

CSS 的权重和优先级相关推荐

最新文章

热门文章