前端 CSS层叠性 CSS选择器优先级

层叠性

层叠性：权重的标签覆盖掉了权重小的标签，说白了，就是被干掉了

权重：谁的权重大，浏览器就会显示谁的属性

我们现在已经学过了很多的选择器，也就是说在一个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"><title>Title</title><style>p{color: red;font-size: 30px;}.spe1{color: yellow;font-size: 40px;}</style>
</head>
<body><div><p class="spe1">我是什么颜色</p><p class="spe1">我是什么颜色</p></div>
</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"><title>Title</title><style>.spe1{color: yellow;font-size: 40px;}.spe2{color: green;font-size: 40px;}</style>
</head>
<body><div><p class="spe1 spe2">我是什么颜色</p><p class="spe1 spe2">我是什么颜色</p></div>
</body>
</html>

转载于:https://www.cnblogs.com/mingerlcm/p/10803628.html

前端 CSS层叠性 CSS选择器优先级相关推荐

css层叠性css层叠性
概念:当样式声明发生冲突时,用户代理需要确定样式声明的最终值,既要考虑样式的来源又要考虑样式的特殊声明又要考虑优先级.以及先后顺序 ,这个过程就叫做层叠当一个标签被相同的选择器选择到的时候,相同的 ...
CSS三大特性（CSS层叠性、CSS继承性、CSS优先级）
1. CSS层叠性层叠性是指多种CSS样式的叠加. 原则: 样式冲突,遵循的原则是就近原则. 那个样式离着结构近,就执行那个样式. 样式不冲突,不会层叠示例代码: <!DOCTYPE htm ...
CSS层叠性（重要）
CSS层叠性(重要) 指多种CSS样式的叠加. 是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上,那么这个时候一个属性就会将另一个属性层叠掉. 原则: 1.样式冲突,遵循的 ...
【CSS】CSS 特性 ① ( CSS 层叠性 | 样式冲突 | 就近原则选择样式 )
文章目录一.CSS 层叠性 1.样式层叠冲突 2.样式层叠不冲突一.CSS 层叠性 1.样式层叠冲突 CSS 层叠性 : 为标签设置多种 CSS 样式 , 会出现 CSS 样式叠加的情况 , ...
CSS基础(part4)--CSS的层叠性继承性优先级
学习笔记,仅供参考,有错必纠参考自:CSS中文文档文章目录 CSS CSS层叠性 CSS继承性 CSS的优先级(特殊性) 复合选择器的优先级关于优先级权重的注意事项 CSS CSS层叠性所谓层 ...
详解CSS三大特性之层叠性、继承性和重要性——Web前端系列学习笔记
1. CSS层叠性 CSS层叠性就是在HTML文件中对于同一个标签元素可以有多个CSS样式存在,当有相同权重的样式存在时,会根据这些CSS样式的前后顺序来决定,处于最后面的CSS样式会被应用,示例代码 ...
讲给后台程序员看的前端系列教程(19)——CSS的层叠性与继承性以及优先级
C语言自学完备手册(33篇) Android多分辨率适配框架 HTML5前端开发实战系列教程 MySQL数据库实操教程(35篇图文版) 推翻自己和过往--自定义View系列教程(10篇) 走出思维困境 ...
web前端学习128-134（CSS三大特性---层叠性，继承性，优先级）
文章目录 1 CSS的三大特性 1.1 层叠性 1.2 继承性 1.3 优先级 1 CSS的三大特性 CSS有三个非常重要的三个特性︰层叠性.继承性.优先级. 1.1 层叠性相同选择器给设置相同的样 ...
CSS 的三个特性：层叠性、继承性、优先级
层叠性 CSS 有三个非常重要的三个特性:层叠性.继承性.优先级. 相同选择器给设置相同的样式,此时一个样式就会覆盖(层叠)另一个冲突的样式.层叠性主要解决样式冲突的问题层叠性原则:  样式冲突 ...

前端 CSS层叠性 CSS选择器优先级

层叠性

前端 CSS层叠性 CSS选择器优先级相关推荐

最新文章

热门文章