层叠 1. 比较内容层级重要性的三个方法 2. 通过选择器来比较层级重要 通过比较特殊性 应用场景 3. 比较源次序 重置css样式的导入
六行代码
帮助1人
层叠
声明冲突：同一个样式，多次应用到同一个元素
层叠（权重计算）：解决声明冲突的过程，浏览器自动处理
了解层叠方便写代码的时候制造层叠
1. 比较内容层级重要性的三个方法
重要性从高到底：
作者样式表：开发者书写的样式
1） 作者样式表中的! important样式
- 如果某个样式无法显示，可以在此样式的css里 ! important
这样此样式的优先级就是最高的，浏览器会优先显示 - ! important 最好不要加，后续需求发生改变，会比较难处理
如下所示：
h1{
background-color: yellow !important;
}
- 作者样式表中的普通样式
- 正常书写的代码
- 浏览器默认样式表中的样式
2. 通过选择器来比较层级（重要）
通过比较特殊性
看选择器
总体规则：选择器选中的范围越窄，越特殊
具体规则：通过选择器，计算出一个4位数（x x x x）
这四个数字选取之后，可以按位依次进行比较，不需要考虑进制的问题。
- 重要性从千位依次递减
- 千位：内联样式
- 百位：选择器中所有id选择器的数量
- 十位：选择器中所有类选择器、属性选择器、伪类选择器的数量
- 个位：选择器中所有元素选择器、伪元素选择器的数量
例子如下：
<style>
一个元素选择器：0001
a{
color: #ff4400;
}
三个元素选择器：0003；
div ul a{
color:aqua;
}
两个id选择器，一个元素选择器 0201
#miyo #miy a{
color: antiquewhite;
}
两个id选择器，一个类选择器 0210
#miyou #miy .m{
color: blue;
}
两个id选择器，一个元素选择器，一个伪类选择器 0211
#miyo #miy a:visited{
color:blueviolet;
}
</style>
<body>
<div id="miyo">
<ul id="miy">
<li id="mi">
<a href="http://百度.com" class="m">百度</a>
</li>
</ul>
</div>
</body>
应用场景：
一般用于网站发生新改动的时候，可以用层级比较高的将原来的给覆盖掉，这样就不用去改之前的代码。
3. 比较源次序
意思是 遇到两个层级一样的样式，会显示哪个的时候。
- 代码书写靠后的胜出
重置css样式的导入
- 重置样式表
书写一些作者样式（自己写的代码），覆盖浏览器的默认样式
为什么要进行默认样式的覆盖，因为不同浏览器的展示的效果是不一样的，为了让写的网站在不同的浏览器上的效果都是一样的，会先将浏览器的样式先进行归零，也就是先写一个重置样式，再写一个自己做的css样式。
重置样式表 覆盖 浏览器的默认样式
导入css样式的时候，会先放置重置样式，再放置自己写的样式。
一般重置样式的内容不用自己写，网上有现成的。
<link rel="stylesheet" href="https://meyerweb.com/eric/tools/css/reset/reset.css">
<link rel="stylesheet" href="../css/作业/控制器.css">
常见的重置样式表：normalize.css、reset.css、meyer.css
- 可以网上搜此种样式。并复制代码链接，也可以将代码复制进入本地的css的文件里
- 爱恨法则
伪类选择器的写法排列：
link > visited > hover > active
按此顺序写的原因：
某些时候，会有多种内容同时应用到a元素，所有把相对重要的元素往后写，这样此元素就会优先出现，写在中间的元素有可能在多项内容同时要产生的时候会被卡住的，但由于相对不重要，所以没有关系，把重要的内容往后排，是希望出现卡顿的时候，那个内容也能正常显示。
这篇好文章是转载于：学新通技术网
- 版权申明： 本站部分内容来自互联网，仅供学习及演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，请提供相关证据及您的身份证明，我们将在收到邮件后48小时内删除。
- 本站站名： 学新通技术网
- 本文地址： /boutique/detail/tanhgeiekf
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储，并分享文件
Luke 10-12 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01
