html:(31):层叠和重要性

层叠

我们来思考一个问题：如果在html文件中对于同一个元素可以有多个css样式存在并且这多个css样式具有相同权重值怎么办？好，这一小节中的层叠帮你解决这个问题。

层叠就是在html文件中对于同一个元素可以有多个css样式存在，当有相同权重的样式存在时，会根据这些css样式的前后顺序来决定，处于最后面的css样式会被应用。

如下面代码:

p{color:red;}
p{color:green;}
<p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>

最后 p 中的文本会设置为green，这个层叠很好理解，理解为后面的样式会覆盖前面的样式。

所以前面的css样式优先级就不难理解了：

内联样式表（标签内部）> 嵌入样式表（当前文件中）> 外部样式表（外部文件中）。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>层叠</title>
<style type="text/css">
p{color:red;}
p{color:green;}
p{color:pink;}
</style>
</head>
<body><h1>勇气</h1><p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p><p id="second">到了三年级下学期时，我们班上了一节公开课，老师提出了一个很<span>简单</span>的问题，班里很多同学都举手了，甚至成绩比我差很多的，也举手了，还说着："我来，我来。"我环顾了四周，就我没有举手。</p></body>
</html>

运行结果

重要性

我们在做网页代码的时，有些特殊的情况需要为某些样式设置具有最高权值，怎么办？这时候我们可以使用!important来解决。

如下代码：

p{color:red!important;}
p{color:green;}
<p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>

这时 p 段落中的文本会显示的red红色。

注意：!important要写在分号的前面

这里注意当网页制作者不设置css样式时，浏览器会按照自己的一套样式来显示网页。并且用户也可以在浏览器中设置自己习惯的样式，比如有的用户习惯把字号设置为大一些，使其查看网页的文本更加清楚。这时注意样式优先级为：浏览器默认的样式 < 网页制作者样式 < 用户自己设置的样式，但记住!important优先级样式是个例外，权值高于用户自己设置的样式。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>!important</title>
<style type="text/css">
p{color:red!important;}
p.first{color:green;}
</style>
</head>
<body><h1>勇气</h1><p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p><p id="second">到了三年级下学期时，我们班上了一节公开课，老师提出了一个很<span class="first">简单</span>的问题，班里很多同学都举手了，甚至成绩比我差很多的，也举手了，还说着："我来，我来。"我环顾了四周，就我没有举手。</p></body>
</html>

运行结果

html:(31):层叠和重要性相关推荐

读书笔记——数学之美
读完数学之美,收获很多,在这里我对我的收获进行简要的总结,这些总结中不包括对具体算法和模型的详解,详解请参考其他资料,这里只进行简要的总结. 1 文字和语言 vs 数字和信息文字.数字.语言和数学是 ...
CSS基础--选择器定位
学习目标: 学习层叠.优先级,以及在CSS中继承是如何工作的掌握 CSS 稍微复杂的一些选择器,还有背景,边框等一些 CSS 样式属性. 进一步学习 CSS 选择器相关的知识学习内容: 层叠与继承 ...
Bluemsun第三周预习【CSS+选择器+盒模型】
Bluemsun第三周预习 CSS基础声明块样式表常见样式声明选择器选择器的组合与并列组合并列层叠与继承层叠 1.重要性 2.特殊性 3.源次序爱恨法则的原理就是比较源次序!!! ...
中国风电EPC工程市场运营状况与投资前景规划报告2022年版
中国风电EPC工程市场运营状况与投资前景规划报告2022年版 ═━┈┈━══━┈┈━══━┈┈━══━ [出版机构]: 中商经济研究网第1章:中国风电装机容量统计和市场深度解析 1.1 全国整 ...
《精通CSS-高级Web标准解决方案》笔记
文章目录第一章:基础知识标记简史文档类型和DOCTYPE 浏览器模式和DOCTYPE切换第二章:为样式找到应用目标选择器层叠和特殊性对文档应用样式第三章:可视化格式模型盒模型概述定 ...
程序员学炒股(7) 股指期货收盘价对第二天开盘价有影响吗？
很多微博和文章都说,股指期货的收盘价对第二天开盘价影响很大,因为股指多交易15分钟,因此对股市的第二天开盘价影响非常大,网上有一个文章是这样说的: "股指期货开盘早于股市15分钟,收盘又晚1 ...
详解CSS三大特性之层叠性、继承性和重要性——Web前端系列学习笔记
1. CSS层叠性 CSS层叠性就是在HTML文件中对于同一个标签元素可以有多个CSS样式存在,当有相同权重的样式存在时,会根据这些CSS样式的前后顺序来决定,处于最后面的CSS样式会被应用,示例代码 ...
CSS规则重要性以及继承、层叠
多个规则中只有一个胜出,那么怎么知道哪一个规则更强呢?答案在于每个选择器的特殊性.对于每个规则,用户代理会计算选择器的特殊性,并将这个特殊性附加到规则中的各个声明.如果一个元素有两个或者多个冲突的属性 ...
《数学之美》第31章大数据的威力--谈谈数据的重要性
1 数据的重要性 2 数据的统计和信息技术 3 为什么需要大数据首先,只有当一些随机事件的组合一同出现了很多次以后,才能得到有意义的统计规律: 其次,大数据的采集过程是一个自然过程,有利于消除主观性 ...

html:(31):层叠和重要性

层叠

重要性

html:(31):层叠和重要性相关推荐

最新文章

热门文章