层叠
CSS —— Cascading Style Sheets
cascade
英 /kæˈskeɪd/ 美 /kæˈskeɪd/
n. 小瀑布（尤指大瀑布的一支）；倾泻，流注；瀑布状物；倾泻（或涌出）的东西；（很快发生的）一连串事情；（尤指信息或知识等的）连续传递过程；（一个过程中前一个引发后一个的）连续阶段，一系列装置
v. （水）倾泻，流注；大量落下，垂下；连续传递，传授；使（装置，物品）串联
cascade 代表了CSS后方样式覆盖前方的样式。
实例：
<style>
h1{
color: red;
}
h1{
/* color: blue; */
}
</style>
<style>
h1{
color: red;
}
h1{
color: blue;
}
</style>
后方样式覆盖前方的样式。
三要素
- 优先级
更高的优先级 —— 它范围更小
所以通常情况下，先定义基本元素的通用样式，然后给不同的元素创建对应的类。 - 资源顺序
相同的权重，后面的规则会覆盖前面的规则。
只覆盖相同的属性。
选择器优先级
- 一个元素选择器不是很具体 — 会选择页面上该类型的所有元素 — 所以它的优先级就会低一些。
- 一个类选择器稍微具体点 — 它会选择该页面中有特定 class 属性值的元素 — 所以它的优先级就要高一点。
——MDN
注: 通用选择器 (*)，组合符 (+, >, ~, ’ ')，和否定伪类 (:not) 不会影响优先级。
实例
<style>
.font-red{
color: red;
}
h1,h2{
color: red;
}
h1,h2{
color: blue;
}
</style>
<body>
<h1>This is my heading. </h1>
<h2 class="font-red">优先级：类选择器 > 元素选择器</h2>
</body>
- 最近的祖先样式比其他祖先样式优先级高。
- "直接样式"比"祖先样式"优先级高。
- 选择器优先级关系：内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器。
- 计算选择符中 ID 选择器的个数（a），计算选择符中类选择器、属性选择器以及伪类选择器的个数之和（b），计算选择符中标签选择器和伪元素选择器的个数之和（c）。按 a、b、c 的顺序依次比较大小，大的则优先级高，相等则比较下一个。若最后两个的选择符中 a、b、c 都相等，则按照"就近原则"来判断。
千位： 如果声明在 style 的属性（内联样式）则该位得一分。这样的声明没有选择器，所以它得分总是1000。
百位： 选择器中包含ID选择器则该位得一分。
十位： 选择器中包含类选择器、属性选择器或者伪类则该位得一分。
个位：选择器中包含元素、伪元素选择器则该位得一分。
- 属性后插有 !important 的属性拥有最高优先级。若同时插有 !important，则再利用规则 3、4 判断优先级。
CSS优先级来源
继承
父元素上的css属性是可以被子元素继承的（如： color 和 font-family），有些则不能。·
实例
<!DOCTYPE html>
<html lang="zh-Hans">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>层叠实例</title>
<style>
.font-red {
color: red;
}
header h1,
header h2 {
color: red;
}
header h1,
header h2 {
color: blue;
}
main article{
color: green;
}
</style>
</head>
<body>
<header>
<h1>This is my heading.</h1>
</header>
<main>
<h2 class="font-red">优先级：类选择器 > 元素选择器</h2>
<article>
<h2>我是二级标题</h2>
<p>我是一个段落。</p>
</article>
<article class="font-red">
<h2>我也是二级标题</h2>
<p>我也是一个段落。</p>
</article>
</main>
</body>
</html>
控制继承
CSS 为控制继承提供了四个特殊的通用属性值。每个css属性都接收这些值。
inherit
设置该属性会使子元素属性和父元素相同。实际上，就是 “开启继承”.
initial
设置属性值和浏览器默认样式相同。如果浏览器默认样式中未设置且该属性是自然继承的，那么会设置为 inherit 。
unset
将属性重置为自然值，也就是如果属性是自然继承那么就是 inherit，否则和 initial一样
<!DOCTYPE html>
<html lang="zh-Hans">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>层叠实例</title>
<style>
.font-red {
color: red;
}
/* 页眉 */
/* -------------------------------------------------- */
header h1,
header h2 {
color: red;
}
header h1,
header h2 {
color: blue;
}
/* 主体文章 */
/* -------------------------------------------------- */
main article{
color: green;
}
main{
color: hotpink;
}
main article:last-child{
/* 颜色与父元素相同，这里指的是main */
color: inherit;
}
</style>
</head>
<body>
<header>
<h1>This is my heading.</h1>
</header>
<main>
<h2 class="font-red">优先级：类选择器 > 元素选择器</h2>
<article>
<h2>我是二级标题</h2>
<p>我是一个段落。</p>
</article>
<article class="font-red">
<h2>我也是二级标题</h2>
<p>我也是一个段落。</p>
</article>
<article>
<h2>我还是二级标题</h2>
<p>我还是一个段落。</p>
</article>
</main>
</body>
</html>
重设所有属性值
CSS 的 shorthand 属性 all 可以用于同时将这些继承值中的一个应用于（几乎）所有属性。它的值可以是其中任意一个(inherit, initial, unset, or revert)。这是一种撤销对样式所做更改的简便方法，以便回到之前已知的起点。
实例
<style>
.fix-this {
all: unset;
}
footer p{
border: 2px solid hotpink;
color: hotpink;
font-weight: bold;
}
</style>
<footer>
<p>© 一只爱吃萝卜的小兔子 2022年3月1日</p>
<p class="fix-this">© 一只爱吃萝卜的小兔子 2022年3月1日</p>
</footer>
!important——提高优先级
!important，作用是提高指定样式规则的应用优先权（优先级）。
语法格式{ cssRule !important; }，即写在定义的最后面，例如：
<style>
footer p{
border: 2px solid hotpink !important;
color: hotpink;
font-weight: bold;
}
</style>
277
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
