diff --git a/01-html/02-html标签图文详解(二).md b/01-html/02-html标签图文详解(二).md index a15b3bf..f51afc7 100644 --- a/01-html/02-html标签图文详解(二).md +++ b/01-html/02-html标签图文详解(二).md @@ -3,10 +3,6 @@ > 本文最初于2015-10-02发表于[博客园](http://www.cnblogs.com/smyhvae/p/4852863.html),并在[GitHub](https://github.com/smyhvae/Web)上持续更新。以下是正文。 -HTML标签超详细的图文演示再来一波~~~ - -如果还没有看过昨天的福利的,那可要抓紧喽,传送门:[HTML标签----图文详解](http://www.cnblogs.com/smyhvae/p/4850684.html) - ## 本文主要内容 - 列表标签:`
`也增加了红色属性。于是我们得到这样的结论: + +> 有一些属性,当给自己设置的时候,自己的后代都继承上了,这个就是**继承性。** + +继承性是从自己开始,直到最小的元素。 + +但是呢,如果再给上方的代码加一条属性: + +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 选择器 > 类选择器 > 标签选择器) + +![](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-03-css-14.png) + +另外还有两个冲突的情况: + +- 1、对同一个标签,如果用到了了多个相同的内嵌样式表,它的优先级: **定义**的样式表中,谁最近,就用谁。 +- 2、对于同一个标签,如果引用了多个相同的外部样式表,它的优先级:html文件中,引用样式表的位置越近,就用谁。 + +例如: + +![](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-03-css-16.png) + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +