CSS代表层叠样式表(Cascading Style Sheets)，理解第一个词cascading很重要— cascade 的表现方式是理解CSS的关键。

在某些时候，在做一个项目过程中你会发现一些应该产生效果的样式没有生效。通常的原因是你创建了两个应用于同一个元素的规则。cascade, 和它密切相关的概念是 specificity，决定在发生冲突的时候应该使用哪条规则。设计元素样式的规则可能不是期望的规则，因此需要了解这些机制是如何工作的。

这里也有继承的概念，也就是在默认情况下，一些css属性继承当前元素的父元素上设置的值，有些则不继承。这也可能导致一些和期望不同的结果。

我们来快速的看下正在处理的关键问题，然后依次了解它们是如何相互影响的，以及如何和css交互的。虽然这些概念难以理解，但是随着不断的练习，你会慢慢熟悉它的工作原理。

Stylesheets cascade（样式表层叠） — 简单的说，css规则的顺序很重要；当应用两条同级别的规则到一个元素的时候，写在后面的就是实际使用的规则。

下面的例子中，我们有两个关于 h1 的规则。h1 最后显示蓝色 — 这些规则有相同的优先级，所以顺序在最后的生效。

h1 { 
    color: red; 
}
h1 { 
    color: blue; 
}
<h1>This is my heading.</h1>

优先级

稍后我们会详细解释优先级评分和其他相关内容。

继承也需要在上下文中去理解 —— 一些设置在父元素上的css属性是可以被子元素继承的，有些则不能。

举一个例子，如果你设置一个元素的 color 和 font-family ，每个在里面的元素也都会有相同的属性，除非你直接在元素上设置属性。

body {
    color: blue;
}

span {
    color: black;
}
<p>As the body has been set to have a color of blue this is inherited through the descendants.</p>
<p>We can change the color by targetting the element with a selector, such as this <span>span</span>.</p>

一些属性是不能继承的 — 举个例子如果你在一个元素上设置 width 50% ，所有的后代不会是父元素的宽度的50% 。如果这个也可以继承的话，CSS就会很难使用了!

理解继承

CSS 为控制继承提供了四个特殊的通用属性值。每个css属性都接收这些值。

inherit

设置该属性会使子元素属性和父元素相同。实际上，就是 "开启继承".

initial

设置属性值和浏览器默认样式相同。如果浏览器默认样式中未设置且该属性是自然继承的，那么会设置为 inherit 。

unset

将属性重置为自然值，也就是如果属性是自然继承那么就是 inherit，否则和 initial一样

层叠算法决定如何找出要应用到每个文档元素的每个属性上的值。

1. 它首先过滤来自不同源的全部规则，并保留要应用到指定元素上的那些规则。这意味着这些规则的选择器匹配指定元素，同时也是一个合适的@规则（at-rule）的一部分。
2. 其次，它依据重要性对这些规则进行排序。即是指，规则后面是否跟随者!import以及规则的来源。层叠是按升序排列的，这意味着来着用户自定义样式表的!important值比用户代理样式表的普通值优先级高：
3. 假如层叠顺序相等，则使用哪个值取决于优先级。

CSS 的 shorthand 属性 all 可以用于同时将这些继承值中的一个应用于（几乎）所有属性。它的值可以是其中任意一个(inherit, initial, unset, or revert)。这是一种撤销对样式所做更改的简便方法，以便回到之前已知的起点。

下面的例子中有两个blockquote 。第一个用元素本身的样式 ，第二个设置 all 为 unset

blockquote {
    background-color: red;
    border: 2px solid green;
}
        
.fix-this {
    all: unset;
}
        <blockquote>
            <p>This blockquote is styled</p>
        </blockquote>

        <blockquote class="fix-this">
            <p>This blockquote is not styled</p>
        </blockquote>

理解层叠

资源顺序

优先级

h2 {
    font-size: 2em;
    color: #000;
    font-family: Georgia, ‘Times New Roman‘, Times, serif;
}
        
.small {
    font-size: 1em;
}
        
.bright {
    color: rebeccapurple;
}         
<h2>Heading with no class</h2>
<h2 class="small">Heading with class of small</h2>
<h2 class="bright">Heading with class of bright</h2>

现在让我们来看看浏览器如何计算优先级。我们已经知道一个元素选择器比类选择器的优先级更低会被其覆盖。本质上，不同类型的选择器有不同的分数值，把这些分数相加就得到特定选择器的权重，然后就可以进行匹配。

一个选择器的优先级可以说是由四个部分相加 (分量)，可以认为是个十百千 — 四位数的四个位数：

1. 千位： 如果声明在 style 的属性（内联样式）则该位得一分。这样的声明没有选择器，所以它得分总是1000。
2. 百位： 选择器中包含ID选择器则该位得一分。
3. 十位： 选择器中包含类选择器、属性选择器或者伪类则该位得一分。
4. 个位：选择器中包含元素、伪元素选择器则该位得一分。

注: 通用选择器 (*)，组合符 (+, >, ~, ‘ ‘)，和否定伪类 (:not) 不会影响优先级。

警告: 在进行计算时不允许进行进位，例如，20 个类选择器仅仅意味着 20 个十位，而不能视为 两个百位，也就是说，无论多少个类选择器的权重叠加，都不会超过一个 ID 选择器。

下面有几个单独的例子，有空可以看看。试着思考下，理解为什么优先级是这样定的。我们还没有深入介绍选择器，不过你可以在MDN上面找到每个选择器的详细信息  selectors reference.

在我们继续之前，先看看这个例子。

/* specificity: 0101 */
#outer a {
    background-color: red;
}
        
/* specificity: 0201 */
#outer #inner a {
    background-color: blue;
}

/* specificity: 0104 */
#outer div ul li a {
    color: yellow;
}

/* specificity: 0113 */
#outer div ul .nav a {
    color: white;
}

/* specificity: 0024 */
div div li:nth-child(2) a:hover {
    border: 10px solid black;
}

/* specificity: 0023 */
div li:nth-child(2) a:hover {
    border: 10px dashed black;
}

/* specificity: 0033 */
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;
}        
<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>

View Code

!important