本文最初发表于博客园,并在 GitHub 上持续更新。以下是正文。
我们来看下面这样的代码,来引入继承性:
上方代码中,我们给 div 标签增加红色属性,却发现,div 里的每一个子标签
也增加了红色属性。于是我们得到这样的结论:
- <p>
有一些属性,当给自己设置的时候,自己的后代都继承上了,这个就是继承性。
继承性是从自己开始,直到最小的元素。
但是呢,如果再给上方的代码加一条属性:
上图中,我们给 div 加了一个 border,但是发现只有 div 具备了 border 属性,而 p 标签却没有 border 属性。于是我们可以得出结论:
以后当我们谈到 css 有哪些特性的时候,我们要首先想到继承性。而且,要知道哪些属性具有继承性、哪些属性没有继承性。
很多公司如果要笔试,那么一定会考层叠性。
层叠性:就是 css 处理冲突的能力。 所有的权重计算,没有任何兼容问题!
CSS 像艺术家一样优雅,像工程师一样严谨。
我们来看一个例子,就知道什么叫层叠性了。
上图中,三种选择器同时给 P 标签增加颜色的属性,但是,文字最终显示的是蓝色,这个时候,就出现了层叠性的情况。
当多个选择器,选择上了某个元素的时候,要按照如下顺序统计权重:
id 的数量,类的数量,标签的数量
因为对于相同方式的样式表,其选择器排序的优先级为:ID 选择器 > 类选择器 > 标签选择器
针对上面这句话,我们接下来举一些复杂一点的例子。
如上图所示,统计各个选择器的数量,优先级高的胜出。文字的颜色为红色。
PS:不进位,实际上能进位(奇淫知识点:255 个标签,等于 1 个类名)但是没有实战意义!
上图可以看到,第一个样式和第二个样式的权重相同。但第二个样式的书写顺序靠后,因此以第二个样式为准(就近原则)。
现在我要让一个列表实现上面的这种样式:第一个 li 为红色,剩下的 li 全部为蓝色。
如果写成下面这种代码是无法实现的:
无法实现的原因很简单,计算一下三个选择器的权重就清楚了,显然第二个样式被第一个样式表覆盖了。
正确的做法是:(非常重要)
上图中,第二个样式比第一个样式的权重要大。因此在实战中可以实现这种效果:所有人当中,让某一个人为红,让其他所有人为蓝。
这种方式好用是好用,但用好很难。
就拿上方代码来举例,为了达到这种效果,即为了防止权重不够,比较稳妥的做法是:把第二个样式表照着第一个样式表来写,在此基础上,给第二个样式表再加一个权重。
上面这个例子很具有实战性。
这里需要声明一点:
如果不能直接选中某个元素,通过继承性影响的话,那么权重是 0。
为了验证上面这句话,我们来看看下面这样的例子:
另外:如果大家都是 0,那么有一个就近原则:谁描述的近,听谁的。举例如下:
层叠性。层叠性是一种能力,就是处理冲突的能力。当不同选择器,对一个标签的同一个样式,有不同的值,听谁的?这就是冲突。css 有着严格的处理冲突的机制。
通过列举上面几个例子,我们对权重问题做一个总结。
CSS 的层叠性讲完了,我们来做几个题目吧。
我们把以上内容和上一篇文章做一个简单的知识回顾。
css 属性,面试的时候会有笔试,笔试没有智能感应的。
加粗,倾斜,下划线:
- font - weight: bold;
- font - style: italic;
- text - decoration: underline;
背景颜色、前景色:
- background - color: red;
- color: red;
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 选择器的权重最大,所以文字的颜色是红色。
如果我们想让文字的颜色显示为绿色,只需要给标签选择器的加一个
标记,此时其权重为无穷大。如下:
- !important
important 是英语里面的 "重要的" 的意思。我们可以通过如下语法:
- k: v ! important;
来给一个属性提高权重。这个属性的权重就是无穷大。
注意,一定要注意语法的正确性。
正确的语法:
- font - size: 60px ! important;
错误的语法:
- font - size: 60px; ! important;不能把 ! important写在外面font - size: 60px important;不能忘记感叹号
标记需要强调如下 3 点:
- !important
(1)!important 提升的是一个属性,而不是一个选择器
- 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 结构:
- <div>
- <p>
- 哈哈哈哈哈哈哈哈
- </p>
- </div>
有 CSS 样式:
- div {
- color: red ! important;
- }
- p {
- color: blue;
- }
由于 div 是通过继承性来影响文字颜色的,所以! important 无法提升它的权重,权重依然是 0。
干不过 p 标签,因为 p 标签是实实在在选中了,所以字是蓝色的(以 p 为准)。
(3)!important 不影响就近原则
如果大家都是继承来的,按理说应该按照 "就近原则",那么 important 能否影响就近原则呢?
答案是:不影响。远的,永远是远的。不能给远的写一个 important,干掉近的。
为了验证这个问题,我们可以搞两层具有继承性的标签,然后给外层标签加一个! important,最终看看就近原则有没有被打破。举例如下:
PS:! important 做站的时候,不允许使用。因为会让 css 写的很乱。
现在,我们知道层叠性能比较很多东西:
选择器的写法权重,谁离的近,谁写在下面。
总结:就近原则。ID 选择器优先级最大。
举例:如果都是内嵌样式表,优先级的顺序如下:(ID 选择器 > 类选择器 > 标签选择器)
另外还有两个冲突的情况:
例如:
上面这个图非常重要,我们针对这个图做一个文字描述:
来源: http://www.cnblogs.com/smyhvae/p/7253929.html