update css03
This commit is contained in:
qianguyihao
parent
5261879b42
commit
c0c53ba9ce
@ -1,5 +1,5 @@
|
|||||||
|
|
||||||
> 本文最初于2015-10-03发表于[博客园](http://www.cnblogs.com/smyhvae/p/4855106.html)，并在[GitHub](https://github.com/smyhvae/Web)上持续更新**前端的系列文章**。欢迎在GitHub上关注我，一起入门和进阶前端。
|
> 本文最初于2015-10-04发表于[博客园](http://www.cnblogs.com/smyhvae/p/4855106.html)，并在[GitHub](https://github.com/smyhvae/Web)上持续更新**前端的系列文章**。欢迎在GitHub上关注我，一起入门和进阶前端。
|
||||||
|
|
||||||
> 以下是正文。
|
> 以下是正文。
|
||||||
|
|
||||||
|
|||||||
@ -1,9 +1,21 @@
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
> 本文最初发表于[博客园](http://www.cnblogs.com/smyhvae/p/7253929.html)，并在[GitHub](https://github.com/smyhvae/Web)上持续更新。以下是正文。
|
> 本文最初于2017-07-29发表于[博客园](http://www.cnblogs.com/smyhvae/p/7253929.html)，并在[GitHub](https://github.com/smyhvae/Web)上持续更新**前端的系列文章**。欢迎在GitHub上关注我，一起入门和进阶前端。
|
||||||
|
|
||||||
|
> 以下是正文。
|
||||||
|
|
||||||
|
|
||||||
|
## 本文重点
|
||||||
|
|
||||||
|
- CSS的继承性
|
||||||
|
- CSS的层叠性
|
||||||
|
- 计算权重
|
||||||
|
- 权重问题大总结
|
||||||
|
- CSS样式表的冲突的总结
|
||||||
|
- 权重问题深入
|
||||||
|
- 同一个标签，携带了多个类名
|
||||||
|
- !important标记
|
||||||
|
|
||||||
## CSS的继承性
|
## CSS的继承性
|
||||||
|
|
||||||
@ -26,9 +38,9 @@
|
|||||||
|
|
||||||
上图中，我们给div加了一个border，但是发现只有div具备了border属性，而p标签却没有border属性。于是我们可以得出结论：
|
上图中，我们给div加了一个border，但是发现只有div具备了border属性，而p标签却没有border属性。于是我们可以得出结论：
|
||||||
|
|
||||||
- 关于文字样式的，都具有继承性。这些属性包括：color、 text-开头的、line-开头的、font-开头的。
|
- 关于文字样式的属性，都具有继承性。这些属性包括：color、 text-开头的、line-开头的、font-开头的。
|
||||||
|
|
||||||
- 所有关于盒子的、定位的、布局的属性都不能继承。
|
- 关于盒子、定位、布局的属性，都不能继承。
|
||||||
|
|
||||||
|
|
||||||
以后当我们谈到css有哪些特性的时候，我们要首先想到继承性。而且，要知道哪些属性具有继承性、哪些属性没有继承性。
|
以后当我们谈到css有哪些特性的时候，我们要首先想到继承性。而且，要知道哪些属性具有继承性、哪些属性没有继承性。
|
||||||
@ -38,14 +50,11 @@
|
|||||||
|
|
||||||
## CSS的层叠性
|
## CSS的层叠性
|
||||||
|
|
||||||
|
很多公司如果要笔试，那么一定会考层叠性。
|
||||||
层叠性的含义：一个标签可以被多个
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
### 层叠性：计算权重
|
### 层叠性：计算权重
|
||||||
|
|
||||||
很多公司如果要笔试，那么一定会考层叠性。
|
|
||||||
|
|
||||||
**层叠性：就是css处理冲突的能力。** 所有的权重计算，没有任何兼容问题！
|
**层叠性：就是css处理冲突的能力。** 所有的权重计算，没有任何兼容问题！
|
||||||
|
|
||||||
@ -57,7 +66,6 @@ CSS像艺术家一样优雅，像工程师一样严谨。
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
上图中，三种选择器同时给P标签增加颜色的属性，但是，文字最终显示的是蓝色，这个时候，就出现了层叠性的情况。
|
上图中，三种选择器同时给P标签增加颜色的属性，但是，文字最终显示的是蓝色，这个时候，就出现了层叠性的情况。
|
||||||
|
|
||||||
当多个选择器，选择上了某个元素的时候，要按照如下顺序统计权重：
|
当多个选择器，选择上了某个元素的时候，要按照如下顺序统计权重：
|
||||||
@ -76,7 +84,6 @@ CSS像艺术家一样优雅，像工程师一样严谨。
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
如上图所示，统计各个选择器的数量，优先级高的胜出。文字的颜色为红色。
|
如上图所示，统计各个选择器的数量，优先级高的胜出。文字的颜色为红色。
|
||||||
|
|
||||||
PS：不进位，实际上能进位（奇淫知识点：255个标签，等于1个类名）但是没有实战意义！
|
PS：不进位，实际上能进位（奇淫知识点：255个标签，等于1个类名）但是没有实战意义！
|
||||||
@ -85,8 +92,6 @@ PS：不进位，实际上能进位（奇淫知识点：255个标签，等于1
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
上图可以看到，第一个样式和第二个样式的权重相同。但第二个样式的书写顺序靠后，因此以第二个样式为准（就近原则）。
|
上图可以看到，第一个样式和第二个样式的权重相同。但第二个样式的书写顺序靠后，因此以第二个样式为准（就近原则）。
|
||||||
|
|
||||||
|
|
||||||
@ -95,7 +100,6 @@ PS：不进位，实际上能进位（奇淫知识点：255个标签，等于1
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
现在我要让一个列表实现上面的这种样式：第一个li为红色，剩下的li全部为蓝色。
|
现在我要让一个列表实现上面的这种样式：第一个li为红色，剩下的li全部为蓝色。
|
||||||
|
|
||||||
如果写成下面这种代码是无法实现的：
|
如果写成下面这种代码是无法实现的：
|
||||||
@ -118,7 +122,6 @@ PS：不进位，实际上能进位（奇淫知识点：255个标签，等于1
|
|||||||
|
|
||||||
上面这个例子很具有实战性。
|
上面这个例子很具有实战性。
|
||||||
|
|
||||||
|
|
||||||
#### 举例4：继承性造成的影响
|
#### 举例4：继承性造成的影响
|
||||||
|
|
||||||
这里需要声明一点：
|
这里需要声明一点：
|
||||||
@ -135,19 +138,45 @@ PS：不进位，实际上能进位（奇淫知识点：255个标签，等于1
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
### 层叠性：权重计算的问题大总结（非常重要）
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
### 层叠性：权重问题大总结（重要）
|
|
||||||
|
|
||||||
层叠性。层叠性是一种能力，就是处理冲突的能力。当不同选择器，对一个标签的同一个样式，有不同的值，听谁的？这就是冲突。css有着严格的处理冲突的机制。
|
层叠性。层叠性是一种能力，就是处理冲突的能力。当不同选择器，对一个标签的同一个样式，有不同的值，听谁的？这就是冲突。css有着严格的处理冲突的机制。
|
||||||
|
|
||||||
通过列举上面几个例子，我们对权重问题做一个总结。
|
通过列举上面几个例子，我们对权重问题做一个总结。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
上面这个图非常重要，我们针对这个图做一个文字描述：
|
||||||
|
|
||||||
- 选择上了，数权重，(id的数量，类的数量，标签的数量)。如果权重一样，谁写在后面听谁的。
|
- 选择上了，数权重，(id的数量，类的数量，标签的数量)。如果权重一样，谁写在后面听谁的。
|
||||||
- 没有选择上，通过继承影响的，就近原则，谁描述的近听谁的。如果描述的一样近，比如选择器权重，如果权重再一样重，谁写在后面听谁的。
|
- 没有选择上，通过继承影响的，就近原则，谁描述的近听谁的。如果描述的一样近，比如选择器权重，如果权重再一样重，谁写在后面听谁的。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
### CSS样式表的冲突的总结
|
||||||
|
|
||||||
|
- 1、对于相同的选择器，其样式表排序：行级样式 > 内嵌样式表 > 外部样式表（就近原则）
|
||||||
|
- 2、对于相同方式的样式表，其选择器排序：ID选择器 > 类选择器 > 标签选择器
|
||||||
|
- 3、外部样式表的ID选择器 > 内嵌样式表的标签选择器
|
||||||
|
|
||||||
|
> 总结：就近原则。ID选择器优先级最大。
|
||||||
|
|
||||||
|
举例：如果都是内嵌样式表，优先级的顺序如下：（ID 选择器 > 类选择器 > 标签选择器）
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
另外还有两个冲突的情况：
|
||||||
|
|
||||||
|
- 1、对同一个标签，如果用到了多个相同的内嵌样式表，它的优先级：**定义**的CSS样式表中，谁最近，就用谁。
|
||||||
|
- 2、对于同一个标签，如果引用了多个相同的外部样式表，它的优先级：html文件中，引用样式表的位置越近，就用谁。
|
||||||
|
|
||||||
|
例如：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
### 题目演示
|
### 题目演示
|
||||||
|
|
||||||
CSS的层叠性讲完了，我们来做几个题目吧。
|
CSS的层叠性讲完了，我们来做几个题目吧。
|
||||||
@ -158,7 +187,6 @@ CSS的层叠性讲完了，我们来做几个题目吧。
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
#### 题目2
|
#### 题目2
|
||||||
|
|
||||||
|
|
||||||
@ -175,98 +203,6 @@ 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两个性质
|
|
||||||
|
|
||||||
- 继承性：好的事儿。继承从上到下，哪些能？哪些不能？
|
|
||||||
|
|
||||||
- 层叠性：冲突，多个选择器描述了同一个属性，听谁的？
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
再看几个题目：
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
## 权重问题深入
|
## 权重问题深入
|
||||||
|
|
||||||
### 同一个标签，携带了多个类名，有冲突：
|
### 同一个标签，携带了多个类名，有冲突：
|
||||||
@ -299,7 +235,6 @@ ul li:last-child
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
important是英语里面的“重要的”的意思。我们可以通过如下语法：
|
important是英语里面的“重要的”的意思。我们可以通过如下语法：
|
||||||
|
|
||||||
```
|
```
|
||||||
@ -388,48 +323,90 @@ PS：! important做站的时候，不允许使用。因为会让css写的很乱
|
|||||||
选择器的写法权重，谁离的近，谁写在下面。
|
选择器的写法权重，谁离的近，谁写在下面。
|
||||||
|
|
||||||
|
|
||||||
### CSS样式表的冲突的总结
|
|
||||||
|
|
||||||
- 1、对于相同的选择器，其样式表排序：行级 > 内嵌 > 外部（就近原则）
|
## 知识回顾
|
||||||
- 2、对于相同方式的样式表，其选择器排序：ID选择器 > 类选择器 > 标签选择器
|
|
||||||
- 3、外部样式表的ID选择器 > 内嵌样式表的标签选择器
|
|
||||||
|
|
||||||
> 总结：就近原则。ID选择器优先级最大。
|
> 我们把以上内容和上一篇文章做一个简单的知识回顾。
|
||||||
|
|
||||||
举例：如果都是内嵌样式表，优先级的顺序如下：（ID 选择器 > 类选择器 > 标签选择器）
|
|
||||||
|
|
||||||
|
### CSS属性
|
||||||
|
|
||||||
另外还有两个冲突的情况：
|
> css属性，面试的时候会有笔试，笔试没有智能感应的。
|
||||||
|
|
||||||
- 1、对同一个标签，如果用到了了多个相同的内嵌样式表，它的优先级：**定义**的样式表中，谁最近，就用谁。
|
加粗，倾斜，下划线：
|
||||||
- 2、对于同一个标签，如果引用了多个相同的外部样式表，它的优先级：html文件中，引用样式表的位置越近，就用谁。
|
|
||||||
|
|
||||||
例如：
|
```
|
||||||
|
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的数量，类的数量，标签的数量)。如果权重一样，谁写在后面听谁的。
|
|
||||||
- 没有选择上，通过继承影响的，就近原则，谁描述的近听谁的。如果描述的一样近，比如选择器权重，如果权重再一样重，谁写在后面听谁的。
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
我们来看下面这个例子：
|
|
||||||
|
|
||||||
img
|
|
||||||
|
|
||||||
这例子有点难。
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
## 我的公众号
|
## 我的公众号
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user