css_03 | CSS——CSS 结构和层叠
本文推荐 PC 端阅读~
本文版权归 “公众号 | 前端一万小时” 全部，未经受权，请勿转载！
复制代码
css_03
复制代码
1. 选择器的优先级是如何计算的？
2. 什么是 CSS 继承？哪些属性能继承，哪些不能？
复制代码
前言： 在上一篇《CSS 选择器详解》中，咱们文章一开始就谈到了“结构树”，也明白了以后的种种“选择器”都是创建在有这个“结构树”的基础之上。这篇，咱们将详细阐述“结构树”之于“继承”、“层叠”等的重要性。
① 继承：继承是指在结构树中，从一个元素向其后代元素传递属性值所采用的机制；
② 层叠：层叠是一个“过程”，是浏览器“考虑”的“过程”——浏览器在肯定应当向一个元素应用哪些值时，浏览器不只要考虑“继承”，还要考虑“声明的特殊性”，另外还须要考虑“声明自己的来源”。css
1 特殊性/特定性
“特殊性/特定性”对于理解如何向文档应用声明很重要。
若是一个规则能“更准确”地选择一个元素，那么这个规则就更为“特定/特殊”！
能够经过计算的方法来获得这个“特定性”，值越大，特定性越强：前端
例如：面试
h1 {
color: red;
background: yellow;
} /*specificity=0001*/
p,div {
font-family: sans-serif;
} /*specificity=0002*/
#txa {
width: 300px;
height: 200px;
margin-left: -12px;
} /*specificity=0100*/
.done {
text-decoration: line-through;
} /*specificity=0010*/
li[class] {
color: red;
background:yellow;
} /*specificity=0011*/
复制代码
⚠️ 注： 通配选择器对一个选择器的特定性没有贡献，其“特定性=0000”，虽全是 0 ，但这不表明他没有“特定性”。反而须要记住的是：0 特定性比无特定性要强。
⚠️ 注：有时某个声明可能很是重要，超过了全部其余声明，则在这些声明结束分号前加上 !important 。
如：浏览器
h1 {
color: red;
background: yellow !important;
}
复制代码
2 继承
继承是 CSS 中最基本的内容之一。bash
继承的值没有“特定性”，甚至连 0 特定性也没有。所以咱们随时能使用一个更“特定”的选择器来覆盖其从父选择器继承的属性。性能
通常来说，若是样式会影响你的文本外观，则全部这些样式都能“继承”。如：字体颜色 color 、全部与字体相关的属性:学习
font-family
font-size
font-weight
font-style
复制代码
⚠️ 而大多数 “框模型属性” 就不能继承（包括外边距、内边距、背景和边框），好比给 <body> 元素加了一个边框样式，不表明咱们但愿这个“身体”里全部的元素都有“边框”。字体
3 层叠
CSS：Cascading Style Sheets 层叠样式表。spa
CSS 基于的方法就是让全部样式“层叠”在一块儿，这是经过结合“继承”和“特殊性”作到的。code
层叠是一个“过程”，是浏览器“考虑”的“过程”——浏览器在肯定应当向一个元素应用哪些值时，浏览器不只要考虑“继承”，还要考虑“声明的特殊性”，另外还须要考虑“声明自己的来源”。
站在“浏览器”的角度，它会进行如下几步来决定应用什么样式：
第一步： 收集全部样式表；
- 包括：Web 页面做者写的样式表，读者本身增长的样式表，还有浏览器的默认样式。
第二步： 找到全部匹配的声明；
第三步： 对全部匹配的规则排序；
- 标志
!important的规则的权重要高于没有!important标志的规则。 - 按“来源”——创做人员、读者、浏览器，对应用到给定元素的全部声明排序。通常来讲，创做人员的样式要胜于读者的样式；有
!important标志的读者样式强于全部其余样式（包括有!important标志的创做人员样式）；创做人员样式和读者样式都比浏览器默认样式要强。
第四步： 按上文讲的“特定性”计算值对全部声明排序；
第五步： 按出现顺序对应用到给定元素的全部声明排序。
- 一个声明在样式表或文档中越后出现，它的权重就越大；
- 若是一个样式表中有导入的样式表，通常认为出如今导入样式表中的声明在前，主样式表中的全部声明在后。
4 对上篇文章中遗留问题的解答
a:link {
color: blue;
}
a:visited {
color: red;
}
a:hover {
color: orange;
}
a:active {
color：black;
}
复制代码
如上一篇文章所说：咱们须要按以上顺序来声明连接样式。
经过这篇的学习，咱们知道了缘由：
- 他们都有相同的权重、来源；
- 全部这些选择器的“特定性”值都是同样的：0011；
- 所以，顺序上与元素匹配的最后一个选择器才会胜出。
即：
- 首先，正常状况下，
a的颜色是“蓝色”； - 而后，当我鼠标放上去以后，
:hover在顺序上在下边，因此变为“橙色”； - 接着，当我鼠标按下去时，表示个人鼠标正在这个元素上，那么
:link、:hover、:active都生效，但按层叠规则，:active在顺序上的最下边，故对以上产生覆盖，因此变成“黑色”； - 最后，当我点击过这个连接以后，鼠标移开后，
:link和:visited生效，:visited将:link覆盖并永久生效。
后记： 本篇知识点很少，属于基础知识，须要烂熟于心。路还很长，但愿收获在路上，快乐在路上。
祝好，qdywxs ♥ you！
- 1. CSS中层叠和CSS的7阶层叠水平
- 2. CSS继承和层叠性
- 3. CSS层叠和继承
- 4. css的继承和层叠
- 5. css层叠 权重
- 6. CSS层叠机制
- 7. CSS样式层叠
- 8. CSS层叠上下文/层叠等级
- 9. CSS的“层叠”规则的总结
- 10. CSS层叠上下文、层叠等级、层叠顺序、z-index
- 更多相关文章...
- • CSS 指南 - 网站建设指南
- • jQuery Mobile CSS 类 - jQuery Mobile 教程
- • 适用于PHP初学者的学习线路和建议
- • IntelliJ IDEA 代码格式化配置和快捷键
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. CSS中层叠和CSS的7阶层叠水平
- 2. CSS继承和层叠性
- 3. CSS层叠和继承
- 4. css的继承和层叠
- 5. css层叠 权重
- 6. CSS层叠机制
- 7. CSS样式层叠
- 8. CSS层叠上下文/层叠等级
- 9. CSS的“层叠”规则的总结
- 10. CSS层叠上下文、层叠等级、层叠顺序、z-index