CSS优先级的一些理解

CSS有三个非常重要的特性：层叠性、继承性、优先级

对优先级的一些理解：

当同一个元素指定多个选择器，就会有优先级的产生。

选择器相同，则执行层叠性
选择器不同，则根据选择器权重执行

选择器权重如下表所示：

选择器	选择器权重
继承或者*（通配符）	0,0,0,0
元素选择器	0,0,0,1
类选择器，伪类选择器	0,0,1,0
ID选择器	0,1,0,0
行内样式style=""	1,0,0,0
!important重要的	∞无穷大

优先级注意点：

权重是有4组数字组成，但是不会有进位！（例如一个并集选择器中，由十个标签选择器组成，不及一个类选择器的权重大）。
可以理解为类选择器永远大于元素选择器，id选择器永远大于类选择器，以此类推。
等级判断从左向右，如果某一位数值相同，则判断下一位数值。
注意，可以简单记忆成，通配符和继承的权重为0，标签（元素）选择器的权重为1，类（伪类）选择权重为10，id选择器权重为100，行内样式表权重为1000，!important权重无穷大
继承的权重是0，如果该元素没有直接选中，不管父元素权重多高，子元素得到的权重都是0

权重叠加：

如果是复合选择器，则会有权重叠加，需要计算权重。

举几个例子：

div ul li ----------> 0,0,0,3
.nav ul li ----------> 0,0,1,2
a:hover ----------> 0,0,1,1
.nav a ----------> 0,0,1,1

具体练习一下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 继承的权重为0 */.nav {color: red;}/* 元素选择器权重为1  因此会显示绿色 */li {color:green;}</style>
</head>
<body><ul class="nav"><li>11111</li><li>22222</li><li>33333</li><li>44444</li></ul>
</body>
</html>

效果为：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* .nav li 权重为11 */.nav li{color: red;}/* 需求把第一个小li  颜色改为绿色 加粗 *//* .green权重为10 不可行  .nav .green  权重为20 因此会显示绿色加粗 */.nav .green {color:green;font-weight:700;}</style>
</head>
<body><ul class="nav"><li class="green">11111</li><li>22222</li><li>33333</li><li>44444</li></ul>
</body>
</html>

效果为：

CSS优先级的一些理解相关推荐

深入理解css优先级
为什么要写这篇文章是因为 <style type="text/css"> body h1 {color: green; } html h1 {color: purple ...
css就近原则_「Web前端开发进阶篇」CSS优先级
所谓CSS优先级,即是指CSS样式在浏览器中被解析的先后顺序.既然样式有优先级,那么就会有一个规则来约定这个优先级,而这个"规则"就是重点. [引言] 讲解完这篇CSS优先级的文章 ...
CSS优先级算法浅谈
转自:微点阅读 https://www.weidianyuedu.com 在面试之前对css优先级的理解是 :ID优先级>class>元素选择器,外联样式优先级低于内联样式,内联样式优先 ...
css对应的优先级,新手学习css优先级
css不是一种程序语言,而是一种描述语言.因此,可以说,css理解起来是非常容易的,大部分人通过简单的学习就可以懂得如何写css代码来定义网页的样式.但是,大部分人同样也会在写css的过程中产生很多困 ...
CSS三大特性（CSS层叠性、CSS继承性、CSS优先级）
1. CSS层叠性层叠性是指多种CSS样式的叠加. 原则: 样式冲突,遵循的原则是就近原则. 那个样式离着结构近,就执行那个样式. 样式不冲突,不会层叠示例代码: <!DOCTYPE htm ...
day4(css优先级)
参考博客: http://www.cnblogs.com/yuanchenqi/articles/6856399.html css属性选择器 <!DOCTYPE html> <htm ...
CSS优先级算法是如何计算？
CSS的specificity特性或非凡性,它是一个衡量css优先级的一个标准, 既然的标准就有判定规定和计算方式,specificity用一个四位数来表示, 更像四级从左到右,左的最大级,一级大于一 ...
css优先级计算规则
2019独角兽企业重金招聘Python工程师标准>>> 最近面试了一些求职者,我问css优先级计算规则是怎样的?答曰ID优先级>class>元素选择器,外联样式优先级低于 ...
详细解读CSS优先级——Web前端系列学习笔记
文章目录样式优先级选择器的优先级总结样式优先级 CSS优先级即是指CSS样式在浏览器中被解析的权重不同. 多重样式(Multiple Styles):如果外部样式.内部样式和内联样式同时应用于 ...

CSS优先级的一些理解

对优先级的一些理解：

选择器权重如下表所示：

优先级注意点：

权重叠加：

CSS优先级的一些理解相关推荐

最新文章

热门文章