[前端笔记——CSS] 10.层叠与继承、选择器
- 1.层叠与继承
- 1.1 冲突规则
- 1.2 继承
- 1.3 层叠
- 1.4 CSS位置的影响
- 2.选择器
- 2.1 选择器是什么？
- 2.2 选择器列表
- 2.3 选择器的种类
- 类型、类和 ID 选择器
- 标签属性选择器
- 伪类与伪元素
- 运算符
- 选择器参考表
1.层叠与继承
1.1 冲突规则
CSS 代表层叠样式表（Cascading Style Sheets），层叠的表现方式是理解 CSS 的关键。与层叠密切相关的概念是优先级（specificity），决定在发生冲突的时候应该使用哪条规则。
样式表层叠——简单的说，就是 CSS 规则的顺序很重要；当应用两条同级别的规则到一个元素的时候，写在后面的就是实际使用的规则。
优先级
浏览器是根据优先级来决定当多个规则有不同选择器对应相同的元素的时候需要使用哪个规则。它基本上是一个衡量选择器具体选择哪些区域的尺度：
- 一个元素选择器不是很具体，则会选择页面上该类型的所有元素，所以它的优先级就会低一些。
- 一个类选择器稍微具体点，则会选择该页面中有特定 class 属性值的元素，所以它的优先级就要高一点。
继承——一些设置在父元素上的 CSS 属性是可以被子元素继承的，有些则不能。
这三个概念一起来控制 CSS 规则应用于哪个元素。
1.2 继承
CSS 为控制继承提供了五个特殊的通用属性值。每个 CSS 属性都接收这些值。
inherit
设置该属性会使子元素属性和父元素相同。实际上，就是“开启继承”。
initial
将应用于选定元素的属性值设置为该属性的初始值。
revert(en-US)
将应用于选定元素的属性值重置为浏览器的默认样式，而不是应用于该属性的默认值。在许多情况下，此值的作用类似于 unset。
revert-layer(en-US)
将应用于选定元素的属性值重置为在上一个层叠层中建立的值。
unset
将属性重置为自然值，也就是如果属性是自然继承那么就是 inherit，否则和 initial 一样。
CSS 的简写属性 all 可以用于同时将这些继承值中的一个应用于（几乎）所有属性。它的值可以是其中任意一个（inherit、initial、unset 或 revert）。这是一种撤销对样式所做更改的简便方法，以便回到之前已知的起点。
可以试着实现下面的例子：
<!DOCTYPE html>
<head>
<title>继承</title>
<link rel="stylesheet" href="jicheng.css">
</head>
<body>
<ul class="main">
<li>Item One</li>
<li>Item Two</li>
<ul>
<li>2.1</li>
<li>2.2</li>
</ul>
<li>Item three</li>
<ul class="special">
<li>3.1</li>
<ul>
<li>3.1.1</li>
<li>3.1.2</li>
</ul>
<li>3.2</li>
</ul>
</ul>
<ul>
<li>Default <a href="#">link</a>color</li>
<li class="my-class-1">Inherit the <a href="#">link</a>color</li>
<li class="my-class-2">Reset the <a href="#">link</a>color</li>
<li class="my-class-3">Unset the <a href="#">link</a>color</li>
</ul>
<blockquote>
<p>this blockquote is styled</p>
</blockquote>
<blockquote class="fix-this">
<p>this blockquote is not styled</p>
</blockquote>
</body>
.main{
color: rebeccapurple;
border: 2px solid #ccc;
padding: 1em;
}
.special{
color: black;
font-weight: bold;
}
body{
color: green;
}
.my-class-1 a {
color: inherit;
}
.my-class-2 a {
color: initial;
}
.my-class-3 a {
color: unset;
}
blockquote{
background-color: red;
border:2px solid green;
}
.fix-this{
all:unset;
}
1.3 层叠
层叠如何定义在不止一个元素的时候怎么应用 CSS 规则?
有三个因素需要考虑，根据重要性排序如下，后面的更重要：
1.资源顺序
后面的规则覆盖前面的规则，直到最后一个开始设置样式。资源顺序仅在规则的优先级相同时才体现出来。
2.优先级
不同类型的选择器有不同的分数值。一个选择器的优先级可以说是由三个不同的值（或分量）相加，可以认为是百（ID）十（类）个（元素）——三位数的三个位数：
- ID：选择器中包含 ID 选择器则百位得一分。
- 类：选择器中包含类选择器、属性选择器或者伪类则十位得一分。
- 元素：选择器中包含元素、伪元素选择器则个位得一分。
类选择器的权重大于元素选择器，因此类上定义的属性将覆盖应用于元素上的属性。
内联样式，即 style 属性内的样式声明，优先于所有普通的样式，无论其优先级如何。这样的声明没有选择器，但它们的优先级可以理解为 1-0-0-0；即无论选择器中有多少个 ID，它总是比其它任何优先级的权重都要高。
有一个特殊的 CSS 可以用来覆盖所有上面所有优先级计算，不过需要很小心的使用——!important。用于修改特定属性的值，能够覆盖普通规则的层叠。在一种情况下，可能不得不使用它：当我们不能编辑核心的 CSS 模块，不能用任何其他方式覆盖，而又真的想要覆盖一个样式时。可以研究下面代码学习一下：
<!DOCTYPE html>
<head>
<title>继承</title>
<link rel="stylesheet" href="cengdie.css">
</head>
<body>
<h2>Heading with no class</h2>
<h2 class="small">Heading with class of small</h2>
<h2 class="bright">Heading with class of bright</h2>
<div id="outer" class="container">
<div id="inner" class="container">
<ul>
<li class="nav"><a href="#">One</a></li>
<li class="nav"><a href="#">Two</a></li>
</ul>
</div>
</div>
<p class="better">This is a paragraph</p>
<p class="better" id="winning">One selector to rule them all!</p>
</body>
h2{
font-size: 2em;
color: #000;
font-family: Georgia, 'Times New Roman', Times, serif;
}
.small{
font-size: 1em;
}
.bright{
color: rebeccapurple;
}
/*1.specificity:1-0-1 */
#outer a {
background-color: red;
}
/*2.speciticity:2-0-1 */
#outer #inner a {
background-color: blue;
}
/*3.specificity:1-0-4*/
#outer div ul li a {
color:yellow;
}
/*4.specificity:1-1-3*/
#outer div ul .nav a {
color:white;
}
/*5.specificity:0-2-4*/
div div li:nth-child(2) a:hover {
border: 10px solid black;
}
/*6.specificity:0-2-3*/
div li:nth-child(2) a:hover{
border: 10px dashed black;
}
/*7.specificity:0-3-3*/
div div .nav:nth-child(2) a:hover{
border:10px double black;
}
a {
display: inline-block;
line-height: 40px;
font-size:20px;
text-decoration: none;
text-align: center;
width: 200px;
margin-bottom:10px;
}
ul{
padding:0;
}
li{
list-style-type: none;
}
# winning {
background-color: red;
border: 1px solid black;
}
.better{
background-color: gray;
border: none !important;
}
p{
background-color: blue;
color: white;
padding: 5px;
}
3.重要程度
1.4 CSS位置的影响
CSS 声明的优先级取决于定义它的样式表和级联层。
它让用户可以设置自定义样式表来覆盖开发人员定义的样式，也可以在级联层中声明开发人员定义的样式：可以让非分层样式覆盖分层样式，或者可以让后面的层中声明的样式覆盖先前的层中声明的样式。
覆盖声明的顺序：
相互冲突的声明将按以下顺序应用，后一种声明将覆盖前一种声明：
- 用户代理样式表中的声明（例如，浏览器的默认样式，在没有设置其他样式时使用）。
- 用户样式表中的常规声明（由用户设置的自定义样式）。
- 作者样式表中的常规声明（这些是web 开发人员设置的样式）。
- 作者样式表中的 !important 声明
- 用户样式表中的 !important 声明
- 用户代理样式表中的 !important 声明
注意，标记为 !important 的样式的优先级顺序是颠倒的。
级联层的顺序：
在级联层中声明 CSS 时，优先级的顺序由声明层的顺序来决定。
在任何层之外声明的 CSS 样式会被按声明的顺序组合在一起，形成一个未命名的层，它会被当作最后声明的层。
对于存在冲突的常规（没有 !important 声明）样式，后面的层比先前定义的层的优先级高。
对于带有 !important 标记的样式，其顺序相反——先前的层中的 important 样式比后面的层以及为在层中声明的 important 样式优先级要高。
内联样式比所有作者定义的样式的优先级都要高，不受级联层规则的影响。
可以try 1 try下面的程序：
<p id="addSpecificity">A paragraph with a border and backgroud</p>
@layer firstLayer {
#addSpecificity { /* 1-0-0 */
background-color: blue;
color: white;
border-width: 5px;
border-style: dashed !important;
}
}
@layer secondLayer {
p#addSpecificity { /* 1-0-1 */
background-color: green;
color: orange !important;
border-width: 10px;
border-style: dotted !important;
}
}
2.选择器
2.1 选择器是什么？
CSS 选择器是 CSS 规则的第一部分。它是元素和其他部分组合起来告诉浏览器哪个 HTML 元素应当是被选为应用规则中的 CSS 属性值的方式。选择器所选择的元素，叫做“选择器的对象”。
CSS 中，选择器由 CSS 选择器规范加以定义。就像是 CSS 的其他部分那样，它们需要浏览器的支持才能工作。大多数选择器都是在CSS 3中定义的，这是一个成熟的规范，浏览器对这些选择器有良好的支持。
2.2 选择器列表
如果有多个使用相同样式的 CSS 选择器，那么这些单独的选择器可以被混编为一个“选择器列表”，这样，规则就可以应用到所有的单个选择器上了。例如，如果我的h1和.special类有相同的 CSS，那么我可以把它们写成两个分开的规则。
h1 {
color:blue;
}
.special {
color:blue;
}
也可以将它们组合起来，在它们之间加上一个逗号，变为选择器列表。
h1,.special {
color:blue;
}
空格可以在逗号前或后，如果每个选择器都另起一行，会更好读些。
h1,
.special {
color:blue;
}
当你使用选择器列表时，如果任何一个选择器无效 (存在语法错误)，那么整条规则都会被忽略。
在下面的示例中，无效的 class 选择器会被忽略，而h1选择器仍会被样式化。
h1 {
color: blue;
}
..special {
color: blue;
}
但是在被组合起来以后，整个规则都会失效，无论是h1还是这个 class 都不会被样式化。
h1, ..special {
color: blue;
}
2.3 选择器的种类
类型、类和 ID 选择器
这个选择器组，第一个是指向了所有 HTML 元素 <h1>。
h1 { }
它也包含了一个 class 的选择器：
.box { }
亦或，一个 id 选择器：
.#unique { }
标签属性选择器
这组选择器根据一个元素上的某个标签的属性的存在以选择元素的不同方式：
a[title] { }
或者根据一个有特定值的标签属性是否存在来选择：
a[href="https://example.com"] { }
伪类与伪元素
这组选择器包含了伪类，用来样式化一个元素的特定状态。例如:hover伪类会在鼠标指针悬浮到一个元素上的时候选择这个元素：
a:hover { }
它还可以包含伪元素，选择一个元素的某个部分而不是元素自己。例如，::first-line是会选择一个元素（下面的情况中是<p>）中的第一行，类似<span>包在了第一个被格式化的行外面，然后选择这个<span>。
p::first-line { }
运算符
最后一组选择器可以将其他选择器组合起来，更复杂的选择元素。下面的示例用运算符（>）选择了<article>元素的初代子元素。
article > p { }
选择器参考表
