css选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css学习</title>
</head>
<style>
.h1 {
color: aliceblue;
}
#page-title {
color: red;
}
.title {
color: aqua;
}
</style>
<body>
<header class="page-header">
<h1 class="title" id="page-title">深入解析css</h1>
<nav>
<ul id="main-nav" class="nav">
<li>
<a href="/" class="featured">导航1</a>
</li>
<li>
<a href="/">导航2</a>
</li>
</ul>
</nav>
</header>
</body>
</html>
上面是一个简单的html案例，对于同一个元素应用多个规则时，规则中可能包含冲突的声明，在style样式表中包含了三个规则集，每一个规则给它指定了不同的字体颜色。标题不可能同时拥有三种颜色，所以最终的效果是显示的红色(red)。
浏览器如何知道并解决声明冲突，这其中层叠指的就是这一系列规则。它决定了如何解决冲突，是css语言的基础。层叠会依据三种条件解决冲突。
- 样式表的来源: 样式是从哪里来的，包括你的样式和浏览器默认样式等。
- 选择器优先级: 哪些选择器比另一些选择器更重要。
- 源码顺序: 样式在样式表里的声明顺序。
叠层的规则是按照这种顺序来考虑的，看下图
声明冲突
|
|
不同的来源或者重要新 ---是---> 使用更高优先级的来源里的声明
|
否
|
是不是内联样式(作用域) ---是---> 使用内联声明
|
否
|
选择器是否有不同的优先级 ---是---> 使用更高优先级的声明
|
否
|
使用源码顺序里较晚出现的声明
这些规则让浏览器可以以预测的方式解决css样式规则中的冲突。
样式表的来源
你添加到网页里的样式表并不是浏览器唯一使用的样式表，还有其他类型或来源的样式表。你的样式表属于作者样式表，除此之外还有用户代理样式表，即浏览器默认的样式。用户代理样式表优先级低，你的样式会覆盖它们。
用户代理样式表在不同浏览器上稍有差异，但是大体上是在做相同的事情：为标题<h1>到<h6>和段落<p>添加上下边距，为列表<ol>,<ul>添加左侧内边距，为链接添加颜色，为元素添加各种默认字号。
浏览器应用了用户代理样式表后才会应用你的样式表，即作者样式表，你指定的声明会覆盖用户代理样式表里面的样式，如果在html里链接了多个样式表，那么它们的来源都相同，即属于作者样式表。
用户代理样式表因为设置了用户需要的样式，所以不会做出一些超出预期的事情，当不喜欢默认样式的时候，可以在自己的样式表里面设置别的样式来覆盖用户代理样式即可。
覆盖用户代理样式
作为一个标准的前端打工仔，必定熟悉覆盖代理样式。这种做法实际上就是利用了层叠的样式来源规则。你写的样式会覆盖用户代理样式，因为来源不同。
样式来源规则有一个例外，标记为重要!important的声明。该声明就会被标记为重要的声明。
color:red !important;
标记了!important的声明会被当做更高优先级的来源，因此总体的优先级按照由高到低排列，如下所示：
- 作者的
!important - 作者
- 用户代理
理解优先级
如果无法用来源解决冲突声明，浏览器会尝试检查它们的优先级。理解优先级很重要，因为作者样式几乎都是属于优先级的范围，日常工作接触的大部分开发样式是来自于同源，如果不理解优先级，写出来的css样式会被坑的很惨。
浏览器将优先级分为两部分：HTML的行内样式和选择器的样式。
行内样式
如果HTML的style属性写样式，这个声明只会作用域当前元素。实际上行内元素属于“带作用域”的声明，它会覆盖任何来自样式表或<style>标签的样式。行内样式没有选择器，因为它们直接作用于所在的元素。
<li>
<a href="/" class="featured" style="color:yellow;">导航1</a>
</li>
上面就是一个行内样式，设置了颜色color为黄色yellow。
如果你希望在样式表中覆盖行内样式的声明，需要在样式表中对应标签下的声明后添加!importanta，这样能够将它提升到一个更高优先级来源。但如果行内样式也被标记为!imortant那就无法覆盖它了。最好不要在行内使用!important，而是只在样式表中使用!important。
选择器优先级
优先级的第二部分是由选择器优先级决定。比如，有两个类名的选择器比只有一个类名的选择器优先级更高。具体可以看下面的案例。
通过比较选择器类型来决定哪个选择器优先值最高。
/* 四个标签 */
html body header h1{
color:blue;
}
/* 3个标签和1个类 */
body header .page-header h1{
color:orange;
}
/* 2个类 */
.page-header .title{
color:green;
}
/* 1个id */
#page-title{
color:red;
}
上面的样式表中最终显示的color颜色值为红色(red)。
优先级标记
一个常用的表示优先级的方式是用数组形式来标记，通常用都好隔开每个数。比如“1，2，3”表示用1个id、2个类、2个标签组成。优先级最高的id列为第一位，紧接着是类，最后是标签。
我们可以通过下面的表格来查看各种选择器和对应的优先级。
| 选择器 | id | 类 | 标签 | 标记 |
|---|---|---|---|---|
| html body header ul | 0 | 0 | 4 | 0,0,4 |
| Body header.page-header h1 | 0 | 1 | 3 | 0,1,3 |
| .page-header .title | 0 | 2 | 0 | 0,2,0 |
| #page-title | 1 | 0 | 0 | 1,0,0 |
现在，通过比较数值就能快速明确决定哪个优先级更高。所以上面的顺序是"1,0,0">"0,2,0">"0,1,3">"0,0,4"。而优先级低的样式表会被优先级高的样式表给覆盖。
我们日常开发不建议某个元素的样式表写过长的标签名和类名连体。一般只要能够区分优先级即可。
源码顺序
叠层的第三步，也是最后一步，是源码顺序。如果两个声明的来源和优先级相同，其中一个声明在样式表中出现较晚，或者位于页面较晚引入的样式表中，则该声明胜出。
.nav a{
color:white;
}
a.featured{
color:gray;
}
在上面方法中，选择器优先级相同，都是(0,1,1)，最终浏览器呈现的颜色color是灰色gray。
网友评论