CSS样式----CSS样式表的继承性和层叠性（图文详解）

本文最初于2017-07-29发表于博客园，并在GitHub上持续更新前端的系列文章。欢迎在GitHub上关注我，一块儿入门和进阶前端。

如下是正文。

本文重点

• CSS的继承性
• CSS的层叠性
  • 计算权重
  • 权重问题大总结
  • CSS样式表的冲突的总结
• 权重问题深刻
  • 同一个标签，携带了多个类名
  • !important标记

CSS的继承性

咱们来看下面这样的代码，来引入继承性：

上方代码中，咱们给div标签增长红色属性，却发现，div里的每个子标签<p>也增长了红色属性。因而咱们获得这样的结论：

有一些属性，当给本身设置的时候，本身的后代都继承上了，这个就是继承性。

继承性是从本身开始，直到最小的元素。

可是呢，若是再给上方的代码加一条属性：

上图中，咱们给div加了一个border，可是发现只有div具有了border属性，而p标签却没有border属性。因而咱们能够得出结论：

• 关于文字样式的属性，都具备继承性。这些属性包括：color、 text-开头的、line-开头的、font-开头的。

• 关于盒子、定位、布局的属性，都不能继承。

之后当咱们谈到css有哪些特性的时候，咱们要首先想到继承性。并且，要知道哪些属性具备继承性、哪些属性没有继承性。

CSS的层叠性

不少公司若是要笔试，那么必定会考层叠性。

层叠性：计算权重

层叠性：就是css处理冲突的能力。 全部的权重计算，没有任何兼容问题！

CSS像艺术家同样优雅，像工程师同样严谨。

咱们来看一个例子，就知道什么叫层叠性了。

上图中，三种选择器同时给P标签增长颜色的属性，可是，文字最终显示的是蓝色，这个时候，就出现了层叠性的状况。

当多个选择器，选择上了某个元素的时候，要按照以下顺序统计权重：

id的数量，类的数量，标签的数量

由于对于相同方式的样式表，其选择器排序的优先级为：ID选择器 > 类选择器 > 标签选择器

针对上面这句话，咱们接下来举一些复杂一点的例子。

层叠性举例

举例1：计算权重

如上图所示，统计各个选择器的数量，优先级高的胜出。文字的颜色为红色。

PS：不进位，实际上能进位（奇淫知识点：255个标签，等于1个类名）可是没有实战意义！

举例2：权重相同时

上图能够看到，第一个样式和第二个样式的权重相同。但第二个样式的书写顺序靠后，所以以第二个样式为准（就近原则）。

举例3：具备实战性的例子

如今我要让一个列表实现上面的这种样式：第一个li为红色，剩下的li所有为蓝色。

若是写成下面这种代码是没法实现的：

没法实现的缘由很简单，计算一下三个选择器的权重就清楚了，显然第二个样式被第一个样式表覆盖了。

正确的作法是：（很是重要）

上图中，第二个样式比第一个样式的权重要大。所以在实战中能够实现这种效果：全部人当中，让某一我的为红，让其余全部人为蓝。

这种方式好用是好用，但用好很难。

就拿上方代码来举例，为了达到这种效果，即为了防止权重不够，比较稳妥的作法是：把第二个样式表照着第一个样式表来写，在此基础上，给第二个样式表再加一个权重。

上面这个例子很具备实战性。

举例4：继承性形成的影响

这里须要声明一点：

若是不能直接选中某个元素，经过继承性影响的话，那么权重是0。

为了验证上面这句话，咱们来看看下面这样的例子：

另外：若是你们都是0，那么有一个就近原则：谁描述的近，听谁的。举例以下：

层叠性：权重计算的问题大总结（很是重要）

层叠性。层叠性是一种能力，就是处理冲突的能力。当不一样选择器，对一个标签的同一个样式，有不一样的值，听谁的？这就是冲突。css有着严格的处理冲突的机制。

经过列举上面几个例子，咱们对权重问题作一个总结。

上面这个图很是重要，咱们针对这个图作一个文字描述：

• 选择上了，数权重，(id的数量，类的数量，标签的数量)。若是权重同样，谁写在后面听谁的。
• 没有选择上，经过继承影响的，就近原则，谁描述的近听谁的。若是描述的同样近，好比选择器权重，若是权重再同样重，谁写在后面听谁的。

CSS样式表的冲突的总结

• 一、对于相同的选择器，其样式表排序：行级样式 > 内嵌样式表 > 外部样式表（就近原则）
• 二、对于相同方式的样式表，其选择器排序：ID选择器 > 类选择器 > 标签选择器
• 三、外部样式表的ID选择器 > 内嵌样式表的标签选择器

总结：就近原则。ID选择器优先级最大。

举例：若是都是内嵌样式表，优先级的顺序以下：（ID 选择器 > 类选择器 > 标签选择器）

另外还有两个冲突的状况：

• 一、对同一个标签，若是用到了多个相同的内嵌样式表，它的优先级：定义的CSS样式表中，谁最近，就用谁。
• 二、对于同一个标签，若是引用了多个相同的外部样式表，它的优先级：html文件中，引用样式表的位置越近，就用谁。

例如：

题目演示

CSS的层叠性讲完了，咱们来作几个题目吧。

题目1

题目2

题目3

题目4

权重问题深刻

同一个标签，携带了多个类名，有冲突：

这里须要补充两种冲突的状况：

• 一、对同一个标签，若是用到了了多个相同的内嵌样式表，它的优先级： 定义的样式表中，谁最近，就用谁。
• 二、对于同一个标签，若是引用了多个相同的外部样式表，它的优先级：html文件中，引用样式表的位置越近，就用谁。

例如：（就近原则）

上图中，文字显示的颜色均为红色。由于这和在标签中的挂类名的书序无关，只和css的顺序有关。

!important标记

来看个很简单的例子：

上图中，显然id选择器的权重最大，因此文字的颜色是红色。

若是咱们想让文字的颜色显示为绿色，只须要给标签选择器的加一个!important标记，此时其权重为无穷大。以下：

important是英语里面的“重要的”的意思。咱们能够经过以下语法：

k:v !important;

来给一个属性提升权重。这个属性的权重就是无穷大。

注意，必定要注意语法的正确性。

正确的语法：

font-size:60px !important;

错误的语法：

font-size:60px; !important;    不能把!important写在外面
font-size:60px important;      不能忘记感叹号

!important标记须要强调以下3点：

（1）!important提高的是一个属性，而不是一个选择器

p{
            color:red !important;    只写了这一个!important，因此只有字体颜色属性提高了权重
            font-size: 100px ;       这条属性没有写!important，因此没有提高权重
        }
        #para1{
            color:blue;
            font-size: 50px;
        }
        .spec{
            color:green;
            font-size: 20px;
        }

因此，综合来看，字体颜色是red（听important的）；字号是50px（听id的）。

（2）!important没法提高继承的权重，该是0仍是0

好比HTML结构：

<div>
        <p>哈哈哈哈哈哈哈哈</p>
    </div>

有CSS样式：

div{
        color:red !important;
    }
    p{
        color:blue;
    }

因为div是经过继承性来影响文字颜色的，因此!important没法提高它的权重，权重依然是0。

干不过p标签，由于p标签是实实在在选中了，因此字是蓝色的（以p为准）。

(3)!important不影响就近原则

若是你们都是继承来的，按理说应该按照“就近原则”，那么important可否影响就近原则呢？
答案是：不影响。远的，永远是远的。不能给远的写一个important，干掉近的。

为了验证这个问题，咱们能够搞两层具备继承性的标签，而后给外层标签加一个!important，最终看看就近原则有没有被打破。举例以下：

PS：! important作站的时候，不容许使用。由于会让css写的很乱。
如今，咱们知道层叠性能比较不少东西：
选择器的写法权重，谁离的近，谁写在下面。

知识回顾

咱们把以上内容和上一篇文章作一个简单的知识回顾。

CSS属性

css属性，面试的时候会有笔试，笔试没有智能感应的。

加粗，倾斜，下划线：

font-weight:bold;
font-style:italic;
text-decoration:underline;

背景颜色、前景色：

background-color:red;
color:red;

class和id的区别

class用于css的，id用于js的。

1）class页面上能够重复。id页面上惟一，不能重复。
2）一个标签能够有多个class，用空格隔开。可是id只能有id。

各类选择器(浏览器兼容性)

IE6层面兼容的选择器： 标签选择器、id选择器、类选择器、后代、交集选择器、并集选择器、通配符。以下：

p
#box
.spec
div p
div.spec
div,p
*

IE7可以兼容的：儿子选择器、下一个兄弟选择器。以下：

div>p
h3+p

IE8可以兼容的：

ul li:first-child
ul li:last-child

css两个性质

• 继承性：好的事儿。继承从上到下，哪些能？哪些不能？

• 层叠性：冲突，多个选择器描述了同一个属性，听谁的？

再看几个题目：

权重问题大总结，最后有个例子，比较难，暂时略掉。

个人公众号

想学习代码以外的软技能？不妨关注个人微信公众号：生命团队（id：vitateam）。

扫一扫，你将发现另外一个全新的世界，而这将是一场美丽的意外：