From c0c53ba9ceff0c42e6bc7e430aae9d62c3944b0a Mon Sep 17 00:00:00 2001 From: qianguyihao Date: Thu, 11 Jan 2018 14:05:35 +0800 Subject: [PATCH] update css03 --- 02-CSS/02-CSS属性.md | 2 +- 02-CSS/03-CSS样式表的继承性和层叠性.md | 265 +++++++++++-------------- 2 files changed, 122 insertions(+), 145 deletions(-) diff --git a/02-CSS/02-CSS属性.md b/02-CSS/02-CSS属性.md index 297d800..2aeb372 100644 --- a/02-CSS/02-CSS属性.md +++ b/02-CSS/02-CSS属性.md @@ -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上关注我，一起入门和进阶前端。 > 以下是正文。 diff --git a/02-CSS/03-CSS样式表的继承性和层叠性.md b/02-CSS/03-CSS样式表的继承性和层叠性.md index 6befd88..f4d44a2 100644 --- a/02-CSS/03-CSS样式表的继承性和层叠性.md +++ b/02-CSS/03-CSS样式表的继承性和层叠性.md @@ -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的继承性 @@ -26,9 +38,9 @@ 上图中，我们给div加了一个border，但是发现只有div具备了border属性，而p标签却没有border属性。于是我们可以得出结论： -- 关于文字样式的，都具有继承性。这些属性包括：color、 text-开头的、line-开头的、font-开头的。 +- 关于文字样式的属性，都具有继承性。这些属性包括：color、 text-开头的、line-开头的、font-开头的。 -- 所有关于盒子的、定位的、布局的属性都不能继承。 +- 关于盒子、定位、布局的属性，都不能继承。 以后当我们谈到css有哪些特性的时候，我们要首先想到继承性。而且，要知道哪些属性具有继承性、哪些属性没有继承性。 @@ -38,14 +50,11 @@ ## CSS的层叠性 - -层叠性的含义：一个标签可以被多个 - +很多公司如果要笔试，那么一定会考层叠性。 ### 层叠性：计算权重 -很多公司如果要笔试，那么一定会考层叠性。 **层叠性：就是css处理冲突的能力。** 所有的权重计算，没有任何兼容问题！ @@ -57,7 +66,6 @@ CSS像艺术家一样优雅，像工程师一样严谨。 ![](http://img.smyhvae.com/20170725_2132.png) - 上图中，三种选择器同时给P标签增加颜色的属性，但是，文字最终显示的是蓝色，这个时候，就出现了层叠性的情况。 当多个选择器，选择上了某个元素的时候，要按照如下顺序统计权重： @@ -76,7 +84,6 @@ CSS像艺术家一样优雅，像工程师一样严谨。 ![](http://img.smyhvae.com/20170725_2138.png) - 如上图所示，统计各个选择器的数量，优先级高的胜出。文字的颜色为红色。 PS：不进位，实际上能进位（奇淫知识点：255个标签，等于1个类名）但是没有实战意义！ @@ -85,8 +92,6 @@ PS：不进位，实际上能进位（奇淫知识点：255个标签，等于1 ![](http://img.smyhvae.com/20170725_2250.png) - - 上图可以看到，第一个样式和第二个样式的权重相同。但第二个样式的书写顺序靠后，因此以第二个样式为准（就近原则）。 @@ -95,7 +100,6 @@ PS：不进位，实际上能进位（奇淫知识点：255个标签，等于1 ![](http://img.smyhvae.com/20170726_2221.png) - 现在我要让一个列表实现上面的这种样式：第一个li为红色，剩下的li全部为蓝色。 如果写成下面这种代码是无法实现的： @@ -118,7 +122,6 @@ PS：不进位，实际上能进位（奇淫知识点：255个标签，等于1 上面这个例子很具有实战性。 - #### 举例4：继承性造成的影响 这里需要声明一点： @@ -135,30 +138,55 @@ PS：不进位，实际上能进位（奇淫知识点：255个标签，等于1 ![](http://img.smyhvae.com/20170727_0845.png) - - - - -### 层叠性：权重问题大总结（重要） +### 层叠性：权重计算的问题大总结（非常重要） 层叠性。层叠性是一种能力，就是处理冲突的能力。当不同选择器，对一个标签的同一个样式，有不同的值，听谁的？这就是冲突。css有着严格的处理冲突的机制。 通过列举上面几个例子，我们对权重问题做一个总结。 +![](http://img.smyhvae.com/20170727_2050.png) + + +上面这个图非常重要，我们针对这个图做一个文字描述： + - 选择上了，数权重，(id的数量，类的数量，标签的数量)。如果权重一样，谁写在后面听谁的。 - 没有选择上，通过继承影响的，就近原则，谁描述的近听谁的。如果描述的一样近，比如选择器权重，如果权重再一样重，谁写在后面听谁的。 + + +### CSS样式表的冲突的总结 + +- 1、对于相同的选择器，其样式表排序：行级样式 > 内嵌样式表 > 外部样式表（就近原则） +- 2、对于相同方式的样式表，其选择器排序：ID选择器 > 类选择器 > 标签选择器 +- 3、外部样式表的ID选择器 > 内嵌样式表的标签选择器 + +> 总结：就近原则。ID选择器优先级最大。 + +举例：如果都是内嵌样式表，优先级的顺序如下：（ID 选择器 > 类选择器 > 标签选择器） + +![](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-03-css-14.png) + +另外还有两个冲突的情况： + +- 1、对同一个标签，如果用到了多个相同的内嵌样式表，它的优先级：**定义**的CSS样式表中，谁最近，就用谁。 +- 2、对于同一个标签，如果引用了多个相同的外部样式表，它的优先级：html文件中，引用样式表的位置越近，就用谁。 + +例如： + +![](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-03-css-16.png) + + + ### 题目演示 CSS的层叠性讲完了，我们来做几个题目吧。 -#### 题目1 +#### 题目1 ![](http://img.smyhvae.com/20170727_0851.png) - #### 题目2 ![](http://img.smyhvae.com/20170727_0853.png) @@ -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两个性质 - -- 继承性：好的事儿。继承从上到下，哪些能？哪些不能？ - -- 层叠性：冲突，多个选择器描述了同一个属性，听谁的？ - - - -再看几个题目： - - - -![](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) - - - ## 权重问题深入 ### 同一个标签，携带了多个类名，有冲突： @@ -299,7 +235,6 @@ ul li:last-child ![](http://img.smyhvae.com/20170727_2035.png) - important是英语里面的“重要的”的意思。我们可以通过如下语法： ``` @@ -388,48 +323,90 @@ PS：! important做站的时候，不允许使用。因为会让css写的很乱 选择器的写法权重，谁离的近，谁写在下面。 -### CSS样式表的冲突的总结 -- 1、对于相同的选择器，其样式表排序：行级 > 内嵌 > 外部（就近原则） -- 2、对于相同方式的样式表，其选择器排序：ID选择器 > 类选择器 > 标签选择器 -- 3、外部样式表的ID选择器 > 内嵌样式表的标签选择器 +## 知识回顾 -> 总结：就近原则。ID选择器优先级最大。 +> 我们把以上内容和上一篇文章做一个简单的知识回顾。 -举例：如果都是内嵌样式表，优先级的顺序如下：（ID 选择器 > 类选择器 > 标签选择器） -![](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-03-css-14.png) +### CSS属性 -另外还有两个冲突的情况： +> css属性，面试的时候会有笔试，笔试没有智能感应的。 -- 1、对同一个标签，如果用到了了多个相同的内嵌样式表，它的优先级：**定义**的样式表中，谁最近，就用谁。 -- 2、对于同一个标签，如果引用了多个相同的外部样式表，它的优先级：html文件中，引用样式表的位置越近，就用谁。 +加粗，倾斜，下划线： -例如： +``` +font-weight:bold; +font-style:italic; +text-decoration:underline; +``` -![](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-03-css-16.png) + +背景颜色、前景色： + +``` +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两个性质 + +- 继承性：好的事儿。继承从上到下，哪些能？哪些不能？ + +- 层叠性：冲突，多个选择器描述了同一个属性，听谁的？ + + +再看几个题目： + + +![](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) -### 权重计算的总结（非常重要） - -![](http://img.smyhvae.com/20170727_2050.png) - -上面这个图非常重要，我们针对这个图做一个文字描述： - -- 选择上了，数权重，(id的数量，类的数量，标签的数量)。如果权重一样，谁写在后面听谁的。 -- 没有选择上，通过继承影响的，就近原则，谁描述的近听谁的。如果描述的一样近，比如选择器权重，如果权重再一样重，谁写在后面听谁的。 - - - - -我们来看下面这个例子： - -img - -这例子有点难。 - - +权重问题大总结，最后有个例子，比较难，暂时略掉。 ## 我的公众号