234 lines
5.2 KiB
Markdown
234 lines
5.2 KiB
Markdown
|
02-CSS的继承性和层叠性
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
## CSS的继承性
|
|||
|
|
|
|||
|
|
我们来看下面这样的代码：
|
|||
|
|
|
|||
|
|
20170724_2359.png
|
|||
|
|
|
|||
|
|
上方代码中，我们给div标签增加红色属性，却发现，div里的每一个子标签`<p>`也增加了红色属性。于是我们得到这样的结论：
|
|||
|
|
|
|||
|
|
> 有一些属性，当给自己设置的时候，自己的后代都继承上了，这个就是**继承性。**
|
|||
|
|
|
|||
|
|
继承性是从自己开始，直到最小的元素。
|
|||
|
|
|
|||
|
|
但是呢，如果再给上方的代码加一条属性：
|
|||
|
|
|
|||
|
|
20170725_2122.jpg
|
|||
|
|
|
|||
|
|
上图中，我们给div加了一个border，但是发现只有div具备了border属性，而p标签却没有border属性。
|
|||
|
|
|
|||
|
|
以下属性具有继承性：color、 text-开头的、line-开头的、font-开头的。
|
|||
|
|
|
|||
|
|
**关于文字样式的，都能够继承；所有关于盒子的、定位的、布局的属性都不能继承。**
|
|||
|
|
|
|||
|
|
|
|||
|
|
以后当我们谈到css有哪些特性的时候，我们要首先想到继承性。而且，要知道哪些属性具有继承性、哪些属性没有继承性。
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
## CSS的层叠性
|
|||
|
|
|
|||
|
|
### 层叠性：计算权重
|
|||
|
|
|
|||
|
|
很多公司如果要笔试，那么一定会考层叠性。
|
|||
|
|
|
|||
|
|
**层叠性：就是css处理冲突的能力。** 所有的权重计算，没有任何兼容问题！
|
|||
|
|
|
|||
|
|
CSS像艺术家一样优雅，像工程师一样严谨。
|
|||
|
|
|
|||
|
|
我们来看一个例子，就知道什么叫层叠性了。
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
20170725_2132.png
|
|||
|
|
|
|||
|
|
|
|||
|
|
上图中，三种选择器同时给P标签增加颜色的属性，但是，文字最终显示的是蓝色，这个时候，就出现了层叠性的情况。
|
|||
|
|
|
|||
|
|
当多个选择器，选择上了某个元素的时候，要按照如下顺序统计权重：
|
|||
|
|
|
|||
|
|
> **id的数量，类的数量，标签的数量**
|
|||
|
|
|
|||
|
|
因为对于相同方式的样式表，其选择器排序的优先级为：ID选择器 > 类选择器 > 标签选择器
|
|||
|
|
|
|||
|
|
针对上面这句话，我们接下来举一些复杂一点的例子。
|
|||
|
|
|
|||
|
|
|
|||
|
|
### 层叠性举例
|
|||
|
|
|
|||
|
|
#### 举例1：计算权重
|
|||
|
|
|
|||
|
|
20170725_2138.png
|
|||
|
|
|
|||
|
|
如上图所示，统计各个选择器的数量，优先级高的胜出。文字的颜色为红色。
|
|||
|
|
|
|||
|
|
PS：不进位，实际上能进位（奇淫知识点：255个标签，等于1个类名）但是没有实战意义！
|
|||
|
|
|
|||
|
|
#### 举例2：权重相同时
|
|||
|
|
|
|||
|
|
20170725_2250.png
|
|||
|
|
|
|||
|
|
上图可以看到，第一个样式和第二个样式的权重相同。但第二个样式的书写顺序靠后，因此以第二个样式为准（就近原则）。
|
|||
|
|
|
|||
|
|
|
|||
|
|
#### 举例3：具有实战性的例子
|
|||
|
|
|
|||
|
|
20170726_2221.png
|
|||
|
|
|
|||
|
|
现在我要让一个列表实现上面的这种样式：第一个li为红色，剩下的li全部为蓝色。
|
|||
|
|
|
|||
|
|
如果写成下面这种代码是无法实现的：
|
|||
|
|
|
|||
|
|
20170726_2225.png
|
|||
|
|
|
|||
|
|
无法实现的原因很简单，计算一下三个选择器的权重就清楚了，显然第二个样式被第一个样式表覆盖了。
|
|||
|
|
|
|||
|
|
正确的做法是：（**非常重要**）
|
|||
|
|
|
|||
|
|
20170726_2229.png
|
|||
|
|
|
|||
|
|
上图中，第二个样式比第一个样式的权重要大。因此在实战中可以实现这种效果：**所有人当中，让某一个人为红，让其他所有人为蓝。**
|
|||
|
|
|
|||
|
|
这种方式好用是好用，但用好很难。
|
|||
|
|
|
|||
|
|
就拿上方代码来举例，为了达到这种效果，即为了防止权重不够，比较稳妥的做法是：**把第二个样式表照着第一个样式表来写，在此基础上，给第二个样式表再加一个权重。**
|
|||
|
|
|
|||
|
|
|
|||
|
|
上面这个例子很具有实战性。
|
|||
|
|
|
|||
|
|
|
|||
|
|
#### 举例4：继承性造成的影响
|
|||
|
|
|
|||
|
|
这里需要声明一点：
|
|||
|
|
|
|||
|
|
>如果不能直接选中某个元素，通过继承性影响的话，那么权重是0。
|
|||
|
|
|
|||
|
|
为了验证上面这句话，我们来看看下面这样的例子：
|
|||
|
|
|
|||
|
|
|
|||
|
|
20170727_0843.png
|
|||
|
|
|
|||
|
|
另外：**如果大家都是0，那么有一个就近原则：谁描述的近，听谁的。**举例如下：
|
|||
|
|
|
|||
|
|
20170727_0845.png
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
### 权重问题大总结
|
|||
|
|
|
|||
|
|
通过列举上面几个例子，我们对权重问题做一个总结：
|
|||
|
|
|
|||
|
|
- （1）先看有没有选中，如果选中了，那么以（id数，类数，标签数）来计权重。谁大听谁的。如果都一样，就近原则。
|
|||
|
|
|
|||
|
|
- （2）如果没有选中，那么权重是0。如果大家都是0，就近原则。
|
|||
|
|
|
|||
|
|
### 题目演示
|
|||
|
|
|
|||
|
|
CSS的层叠性讲完了，我们来做几个题目吧。
|
|||
|
|
|
|||
|
|
#### 题目1
|
|||
|
|
|
|||
|
|
20170727_0928.png
|
|||
|
|
|
|||
|
|
|
|||
|
|
#### 题目2
|
|||
|
|
|
|||
|
|
20170727_0929.png
|
|||
|
|
|
|||
|
|
|
|||
|
|
#### 题目3
|
|||
|
|
|
|||
|
|
20170727_0930.png
|
|||
|
|
|
|||
|
|
#### 题目4
|
|||
|
|
|
|||
|
|
20170727_0931.png
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
## CSS样式表的冲突解决
|
|||
|
|
|
|||
|
|
- 1、对于相同的选择器，其样式表排序：行级 > 内嵌 > 外部（就近原则）
|
|||
|
|
- 2、对于相同方式的样式表，其选择器排序：ID选择器 > 类选择器 > 标签选择器
|
|||
|
|
- 3、外部样式表的ID选择器 > 内嵌样式表的标签选择器
|
|||
|
|
|
|||
|
|
> 总结：就近原则。ID选择器优先级最大。
|
|||
|
|
|
|||
|
|
举例：如果都是内嵌样式表，优先级的顺序如下：（ID 选择器 > 类选择器 > 标签选择器）
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
另外还有两个冲突的情况：
|
|||
|
|
|
|||
|
|
- 1、对同一个标签，如果用到了了多个相同的内嵌样式表，它的优先级： **定义**的样式表中，谁最近，就用谁。
|
|||
|
|
- 2、对于同一个标签，如果引用了多个相同的外部样式表，它的优先级：html文件中，引用样式表的位置越近，就用谁。
|
|||
|
|
|
|||
|
|
例如：
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|