Web/02-CSS基础/05-CSS样式表的继承性和层叠性.md
2019-10-05 11:59:34 +08:00

397 lines
12 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

> 本文最初于2017-07-29发表于[博客园](http://www.cnblogs.com/smyhvae/p/7253929.html),并在[GitHub](https://github.com/qianguyihao/Web)上持续更新**前端的系列文章**。欢迎在GitHub上关注我一起入门和进阶前端。
> 以下是正文。
## 本文重点
- CSS的继承性
- CSS的层叠性
- 计算权重
- 权重问题大总结
- CSS样式表的冲突的总结
- 权重问题深入
- 同一个标签,携带了多个类名
- !important标记
## CSS的继承性
我们来看下面这样的代码,来引入继承性:
![](http://img.smyhvae.com/20170724_2359.png)
上方代码中我们给div标签增加红色属性却发现div里的每一个子标签`<p>`也增加了红色属性。于是我们得到这样的结论:
> 有一些属性,当给自己设置的时候,自己的后代都继承上了,这个就是**继承性。**
继承性是从自己开始,直到最小的元素。
但是呢,如果再给上方的代码加一条属性:
![](http://img.smyhvae.com/20170725_2122.jpg)
上图中我们给div加了一个border但是发现只有div具备了border属性而p标签却没有border属性。于是我们可以得出结论
- 关于文字样式的属性都具有继承性。这些属性包括color、 text-开头的、line-开头的、font-开头的。
- 关于盒子、定位、布局的属性,都不能继承。
以后当我们谈到css有哪些特性的时候我们要首先想到继承性。而且要知道哪些属性具有继承性、哪些属性没有继承性。
## CSS的层叠性
很多公司如果要笔试,那么一定会考层叠性。
### 层叠性:计算权重
**层叠性就是css处理冲突的能力。** 所有的权重计算,没有任何兼容问题!
CSS像艺术家一样优雅像工程师一样严谨。
我们来看一个例子,就知道什么叫层叠性了。
![](http://img.smyhvae.com/20170725_2132.png)
上图中三种选择器同时给P标签增加颜色的属性但是文字最终显示的是蓝色这个时候就出现了层叠性的情况。
当多个选择器,选择上了某个元素的时候,要按照如下顺序统计权重:
- id 选择器
- 类选择器、属性选择器、伪类选择器
- 标签选择器、伪元素选择器
因为对于相同方式的样式表其选择器排序的优先级为ID选择器 > 类选择器 > 标签选择器
针对上面这句话,我们接下来举一些复杂一点的例子。
### 层叠性举例
#### 举例1计算权重
![](http://img.smyhvae.com/20170725_2138.png)
如上图所示,统计各个选择器的数量,优先级高的胜出。文字的颜色为红色。
PS不进位实际上能进位奇淫知识点255个标签等于1个类名但是没有实战意义
#### 举例2权重相同时
![](http://img.smyhvae.com/20170725_2250.png)
上图可以看到,第一个样式和第二个样式的权重相同。但第二个样式的书写顺序靠后,因此以第二个样式为准(就近原则)。
#### 举例3具有实战性的例子
![](http://img.smyhvae.com/20170726_2221.png)
现在我要让一个列表实现上面的这种样式第一个li为红色剩下的li全部为蓝色。
如果写成下面这种代码是无法实现的:
![](http://img.smyhvae.com/20170726_2225.png)
无法实现的原因很简单,计算一下三个选择器的权重就清楚了,显然第二个样式被第一个样式表覆盖了。
正确的做法是:(**非常重要**
![](http://img.smyhvae.com/20170726_2229.png)
上图中,第二个样式比第一个样式的权重要大。因此在实战中可以实现这种效果:**所有人当中,让某一个人为红,让其他所有人为蓝。**
这种方式好用是好用,但用好很难。
就拿上方代码来举例,为了达到这种效果,即为了防止权重不够,比较稳妥的做法是:**把第二个样式表照着第一个样式表来写,在此基础上,给第二个样式表再加一个权重。**
上面这个例子很具有实战性。
#### 举例4继承性造成的影响
这里需要声明一点:
>如果不能直接选中某个元素通过继承性影响的话那么权重是0。
为了验证上面这句话,我们来看看下面这样的例子:
![](http://img.smyhvae.com/20170727_0843.png)
另外:**如果大家的权重相同,那么就采用就近原则:谁描述的近,听谁的**。举例如下:(box3 描述得最近,所以采用 box3 的属性)
![](http://img.smyhvae.com/20190122_1530.png)
上方代码的文字版如下:
```html
<!DOCTYPE html>
<html lang="">
<head>
<meta />
<meta />
<meta />
<title>Document</title>
<style>
#box1 {
color: red;
}
#box2 {
color: green;
}
#box3 {
color: blue;
}
</style>
</head>
<body>
<div id="box1">
<div id="box2">
<div id="box3"><p>猜猜我是什么颜色</p></div>
</div>
</div>
</body>
</html>
```
### 层叠性:权重计算的问题大总结(非常重要)
层叠性。层叠性是一种能力就是处理冲突的能力。当不同选择器对一个标签的同一个样式有不同的值听谁的这就是冲突。css有着严格的处理冲突的机制。
通过列举上面几个例子,我们对权重问题做一个总结。
![](http://img.smyhvae.com/20170727_2050.png)
上面这个图非常重要,我们针对这个图做一个文字描述:
- 选择上了,数权重,(id的数量类的数量标签的数量)。如果权重一样,谁写在后面听谁的。
- 没有选择上,通过继承影响的,就近原则,谁描述的近听谁的。如果描述的一样近,比如选择器权重,如果权重再一样重,谁写在后面听谁的。
### CSS样式表的冲突的总结
- 1、对于相同的选择器比如同样都是类选择器其样式表排序行级样式 > 内嵌样式表 > 外部样式表(就近原则)
- 2、对于相同类型的样式表比如同样都是内部样式表其选择器排序ID选择器 > 类选择器 > 标签选择器
- 3、外部样式表的ID选择器 > 内嵌样式表的标签选择器
> 总结就近原则。ID选择器优先级最大。
举例如果都是内嵌样式表优先级的顺序如下ID 选择器 > 类选择器 > 标签选择器)
![](http://img.smyhvae.com/2015-10-03-css-14.png)
另外还有两个冲突的情况:
- 1、对同一个标签如果用到的都是内嵌样式表且权重一致那它的优先级**定义**的CSS样式表中谁最近就用谁。
- 2、对于同一个标签如果用到的都是外部样式表且权重一致那它的优先级html文件中引用样式表的位置越近就用谁。
例如:
![](http://img.smyhvae.com/2015-10-03-css-16.png)
### 题目演示
CSS的层叠性讲完了我们来做几个题目吧。
#### 题目1
![](http://img.smyhvae.com/20170727_0851.png)
#### 题目2
![](http://img.smyhvae.com/20170727_0853.png)
#### 题目3
![](http://img.smyhvae.com/20170727_0855.png)
#### 题目4
![](http://img.smyhvae.com/20170727_0857.png)
## 权重问题深入
### 同一个标签,携带了多个类名,有冲突:
这里需要补充两种冲突的情况:
- 1、对同一个标签如果用到了了多个相同的内嵌样式表它的优先级**定义**的样式表中,谁最近,就用谁。
- 2、对于同一个标签如果引用了多个相同的外部样式表它的优先级html文件中引用样式表的位置越近就用谁。
例如:(就近原则)
![](http://img.smyhvae.com/20170727_2021.png)
上图中,**文字显示的颜色均为红色**。因为这和在标签中的挂类名的书序无关只和css的顺序有关。
### !important标记优先级最高
来看个很简单的例子:
![](http://img.smyhvae.com/20170727_2029.png)
上图中显然id选择器的权重最大所以文字的颜色是红色。
如果我们想让文字的颜色显示为绿色,只需要给标签选择器的加一个`!important`标记,此时其权重为无穷大。如下:
![](http://img.smyhvae.com/20170727_2035_2.png)
important是英语里面的“重要的”的意思。我们可以通过如下语法
```
k:v !important;
```
来给一个属性提高权重。这个属性的权重就是**无穷大**。
注意,一定要注意语法的正确性。
正确的语法:
```
font-size:60px !important;
```
错误的语法:
```
font-size:60px; !important; 不能把!important写在外面
font-size:60px important; 不能忘记感叹号
```
`!important`标记需要强调如下3点
**1!important提升的是一个属性而不是一个选择器**
```css
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结构
```html
<div>
<p>哈哈哈哈哈哈哈哈</p>
</div>
```
有CSS样式
```css
div{
color:red !important;
}
p{
color:blue;
}
```
由于div是通过继承性来影响文字颜色的所以!important无法提升它的权重权重依然是0。
干不过p标签因为p标签是实实在在选中了所以字是蓝色的以p为准
**(3)!important不影响就近原则**
如果大家都是继承来的按理说应该按照“就近原则”那么important能否影响就近原则呢
答案是不影响。远的永远是远的。不能给远的写一个important干掉近的。
为了验证这个问题,我们可以搞两层具有继承性的标签,然后给外层标签加一个!important最终看看就近原则有没有被打破。举例如下
![](http://img.smyhvae.com/20170727_2046.png)
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的。
1class页面上可以重复。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两个性质
- 继承性:好的事儿。继承从上到下,哪些能?哪些不能?
- 层叠性:冲突,多个选择器描述了同一个属性,听谁的?
再看几个题目:
![](http://img.smyhvae.com/20170727_0900.png)
![](http://img.smyhvae.com/20170727_0901.png)
![](http://img.smyhvae.com/20170727_0902.png)
![](http://img.smyhvae.com/20170727_0903.png)
## 我的公众号
想学习**代码之外的技能**?不妨关注我的微信公众号:**千古壹号**id`qianguyihao`)。
扫一扫,你将发现另一个全新的世界,而这将是一场美丽的意外:
![](http://img.smyhvae.com/20190101.png)