我们都知道CSS的全称叫cascade style sheet。中文名翻译过来就是层叠样式表， 但是光从这些文字中间根本想不出什么东东来， 感觉也没有什么意义。 今天我就要来谈谈CSS当中的第一个字母C(cascade)所代表的意义和内容， 万变不离其宗， 理解了cascade再去学习CSS会非常快
一、什么是层叠(cascade)?
我们都知道， CSS就是一群规则， 你用选择器锁定一个元素， 然后给这个元素的属性定下一群规则：例如，这个元素里面的文字要多大啦、文字要什么颜色啦、要不要背景呀，要的话又要什么颜色啦、边框、特殊状态等等。但是当我们对元素的同一个属性设置不同的值时， 就会产生冲突。本篇文章当中，冲突指的是一个标签的被多次赋值了的属性。例如：
<body>
<h1 id="exp" class="heading"> example </h1>
</body>
#exp {
color : green;
}
.heading {
color : blue；
}
h1 {
color : red;
}
这个时候就产生冲突了，color就是一个冲突： 首先这里的color属性是针对同一个标签h1的， 其次，color属性被赋了三次值， 第一次green，第二次blue, 第三次red; 满足这两个条件， 所以这里的color就发生了冲突， 记住这两个条件: 一是属性针对同一个标签， 二是属性被多次赋值（至少两次以上）。我们用不同的选择器拿到h1标签之后分别给它设置不同的颜色。但是浏览器只能展示一种颜色， 这里只会展示绿色。 或许我们大多数人都知道其中的一些规则，像ID选择器的优先级比CLASS选择器的高， 而CLASS选择器又比标签选择器高， 然而这只是冰山一角； 这些规则解决了所发生的冲突， 浏览器用来解决冲突的一套规则就叫做cascade， 也就是层叠的真正含义。
但是在现实项目中， 你代码里面包含的冲突绝对不仅仅这么简单。如果你不了解cascade（一套解决冲突的规则）， 那么可能你辛辛苦苦写完代码， 发现效果居然和预先中的不一样， 蒙了， 而且还不知道哪里错了。下面我就来谈谈cascade具体内容， 帮助你更好的理解CSS。
二、cascade的具体内容
cascade 分别从样式源、指定级和顺序三个方面去解决冲突。下面是cascade解决冲突的流程图：
下面来解释这三个方面分别的含义和作用：
1.样式源
你写的样式并不是浏览器唯一使用的样式， 有一些样式是标签一出现就有了的， 像a标签一出现就有下划线和颜色； 这里有三种样式源： 第一种是浏览器自带的，也就是那些标签一出现就有的样式， 叫做默认源，不同的浏览器会有不同的默认样式； 第二种是开发者写的样式， 也就是我们最常接触的、天天写的样式，姑且称为开发者源吧（名字是我随便起的， 好理解就行， 别扭啥的就别嫌弃了哈）； 最后一种比较特殊，它也是开发者写的样式， 不过它在属性后面加了 !important 关键字， 这种样式是属于最高级别的样式源。
他们的优先级顺序从高到底分别是：
- 开发者源 + !important
- 开发者源
- 默认源
浏览器自带的那些样式是最低级的， 很容易就会被覆盖掉。
在这一步当中， 处于低优先级样式源的样式就会被pass掉， 最常见的应用就是当你写对一个标签写了样式之后，无论这个样式是通过什么方式写的或是在哪儿写的（行内写或通过style标签或通过链接)，样式都会立即生效，不是因为一开始这个属性就没有值， 而是因为它的值被你覆盖掉了。从本篇文章来讲， 就是发生了冲突， 浏览器对这个标签写了一个， 然后你又加了一个， 因为你加的样式属于较高层级的样式源， 所以浏览器最终选择了你的样式来展示。
2.指定级
指定级呢就分为两大部分， 一部分是关于选择器的， 也就是我们大多数人都知道的 ID 优先于 CLASS； 另一部分是关于行内样式的， 也就样式写在标签的style 属性里， 像这个color家伙就是行内样式<h1 style="color : red"> hello, I am red</h1>。OK， 那我们继续谈谈指定级的具体内容吧。
选择器指定级:
我就默认大家都会选择器的基础知识了哈， 比如基础选择器有ID选择器， CLASS选择器，标签选择器和通用选择器， 组合选择器有后代选择器、相邻兄弟选择器、伪类选择器等等；选择器指定级就是指定不同选择器的优先级， 以及弄明白组合选择器当中谁的优先级更高。
优先级从高到底有：
- ID选择器
- CLASS选择器
- 标签选择器
- 通用选择器
组合选择器的规则如下：
- 拥有更多ID选择器的， 赢！
- 如果ID一样多， 拥有更多CLASS选择器的， 赢！
- 如果ID和CLASS一样多， 有更多标签选择的， 赢！
这里注意一下， 伪类选择器(::hover)和属性选择器([type = “input”])和class选择器同等的， 也就是说在判断优先级的时候， 他们和类选择器class完全时一模一样的级别当中。
这里有一种用来表示它的集合(a, b, c)，这三位数字从左到右分别代表ID数量、CLASS数量和标签数量。我用个例子来解释如何表示和使用它们：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>sass practice</title>
<link rel="stylesheet" href="./css/mian.css">
</head>
<body>
<header id="header">
<h1 class="title" id="camp">Najoy camp</h1>
</header>
</body>
</html>
html body header h1 { // (0, 0, 4) a;
color : red;
}
header .title { // (0, 1, 1) b;
color : green;
}
.title#camp { // (1, 1, 0) c;
color : blue;
}
h1#camp { // (1, 0 , 1) d;
color : perple;
}
在上面的CSS代码中，我们用四个不同的组合选择器去选择同一个标签，那么冲突发生了， 同一个标签的color属性被多次赋了值。 这里的color会选择blue， 为什么？ 我们来解析一下：
注释里面分别写好了他们的集合表示；组合选择器a没有ID选择器，也没有CLASS选择器， 所以第一个代表ID的为0， 第二个代表CLASS的数也为0， 有四个标签选择器， 所以代表标签的第三个数为4； 其他的集合表示也是如此得来的， 在此多复述了。那么好玩的比拼游戏开始了：
第一轮比拼ID：a 和 b 落败， c 和 d 平手进入下一轮比拼；
第二轮比拼CLASS：ｂ落败，ｃ获胜。
因为冠军已经出现，所以比拼结束，最终选择组合器ｃ里面的声明，其他选择器作废。
以上就是解决冲突的过程，a、b、c和d组合器都想给h1标签设置样式， 但是无论a b d里面是什么样式都没用， 因为c的优先级高于他们。
行内指定级
行内样式的优先级高于内部样式和外部样式， 这是因为行内样式是直接绑定那个标签的， 而内部样式也好外部样式也罢，他们都是需要通过选择器才能将样式绑定到指定的标签中的，而行内样式根本不需要选择器直接就将样式作用于所属标签自然省力快的多。所以指定级要分为行内部分和选择器部分，而且行内指定级优于选择器指定级， 如果把行内样式也加进集合表示中， 那就再最前面加一个x来表示行内(x, a, b, c) , x就只有两个值0和1， 有行内样式的时候就是1。
但是这里需要注意的是， 即使行内样式高， 但是它还是属于开发者源这一级别当中的，当任何一个地方加上!important的时候， 无论它处于哪里都会覆盖行内的样式，当然这个时候行内样式里面没有!important， 因为这个时候他们不处于同一个样式源当中。
3.顺序
顺序就非常好理解了， 当样式源和指定级都相同的时候， 写在后面的代码会覆盖前面的代码，我们以指定级里面的HTML为例写一个样式:
#camp {
color : red;
font-size : 4rem;
}
#camp {
color : blue;
}
这个时候， 浏览器显示的是大小为4rem, 颜色为blue蓝色的字；这里就color发生了冲突，冲突处于同一个样式源和同一个指定级， 所以比较他们的顺序， 顺序靠后的赢， 因为顺序靠后的覆盖了前面的所有样式。
这里要提一下， 冲突是对一个标签的同一个样式属性来说的， 我们分析的时候， 首先应该看这个属性(例如color) 是不是用在同一个标签， 然后是否发生了冲突。 在上面的例子中font-size就没有发生冲突， 因为无论哪里都没有第二个font-size对这个标签设置样式了。所以冲突是一个一个属性来分析的， 而不是一个代码块。
有一些写CSS的技巧就是,
第一： 少用或不用ID选择器；
第二： 不用!important；
这样的话， 在后续维修代码的时候会很有帮助。
CSS既简单又复杂， 但是万变不离其宗， 只要理解了它的本质，无论今后CSS版本更新到哪一个都很快就能上手了。
哈哈哈， 终于写完了， 有什么不懂的欢迎在下方留言评论。
440
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
