目录
- 层叠
- 1. 比较内容层级重要性的三个方法
- 2. 通过选择器来比较层级(重要)
- 通过比较特殊性
- 应用场景:
- 3. 比较源次序
- 重置css样式的导入
- 常见的重置样式表:normalize.css、reset.css、meyer.css
层叠
声明冲突:同一个样式,多次应用到同一个元素
层叠(权重计算):解决声明冲突的过程,浏览器自动处理
了解层叠方便写代码的时候制造层叠
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://baidu.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元素,所有把相对重要的元素往后写,这样此元素就会优先出现,写在中间的元素有可能在多项内容同时要产生的时候会被卡住的,但由于相对不重要,所以没有关系,把重要的内容往后排,是希望出现卡顿的时候,那个内容也能正常显示。