1200字范文 > 【18】CSS基础(3)——理解层叠式

【18】CSS基础(3)——理解层叠式

时间：2019-09-14 10:50:21

相关推荐

【18】CSS基础(3)——理解层叠式

本篇学习目标：
理解CSS的层叠式(层叠式包含继承性和层叠性)比较重点

CSS 的概念回顾：点击查看★CSS：cascading style sheet层叠样式表，是一种用来表示HTML样式的计算机语言其中两个重要部分①层叠式②样式;这一篇先来讲解贯穿整个css的一个性质，层叠式。

一、继承性

1.含义：

如果一个标签的某个祖先级曾经设置过X样式；而这个标签虽然没有直接设置过X样式，但是在浏览器中却加载了X样式;这种现象就是继承性，X样式都是从祖先级继承而来。所有的文字相关样式属性，都能够被继承；其他的属性都不能被继承。

在网页中，右键→审查元素出现的控制面板可以告诉我们标签样式的来历，如下：

2.应用

将页面中出现最多的文字样式设置给一个较大的祖先级标签比如<body>，后期所有的后代标签都可以从<body>进行继承。

示例：

body {font-size: 14px;color: black;}

二、层叠性

同一个标签是可以被多个选择器选中，但如果选择器后面设置了相同的样式属性，标签最终该加载哪个？或者，在继承性中，如果多个祖先都设置了相同的文字样式，后代中该继承哪个祖先级的？

上面的冲突需要用层叠性去解决。判断最终胜出的属性是谁，需要依赖判断优先级即权重。可以回顾一下选择器权重点击回顾，但那只是层叠性的一部分。只有一个属性会成功加载，它会层叠、覆盖掉其他的属性。

那么如何判断“最终胜出”的属性是谁呢？先判断选择器是否选中目标标签，如果选中，按照以下四步：

1.在选中的目标标签的情况

点击回顾

选择器权重比较。
基础选择器： *<标签选择器<类选择器<id选择器。
高级选择器：①依次比较组成高级选择器的id 的个数，类的个数，标签的个数，如果前面能够比较出大小就不再比较后面，如果前面相等就往后比较，直到比较出大小。若权重一样，后写的层叠掉先写的。

2.在选中的目标标签的祖先级情况：

由于继承性，如果选择器选中目标标签的祖先级且设置了属性，则目标标签会继承属性，但是会按照什么原则进行继承呢？继承哪一个呢？

第一步∶ 就近原则，比较选择器选中的祖先级在 HTML 结构中距离目标标签的远近，近的层叠远的。第二步∶ 如果选中的祖先级距离目标一样近（同一个祖先级），比较选择器权重，权重大的层叠小的。第三步∶如果距离一样近，权重也相同，最后比较CSS中的书写顺序，后面的层叠前面的。

第一步示例：
下面代码中，选择器选中的都是p的祖先级，且距离不同：

<DOCTYPE html><html><head><title>选中祖先级，未选中目标元素，且距离不同</title><style>div.box.first {/*交集选择器选中最外层盒子*/color: blue;}#box2 {/*id选择器选中中层盒子*/color:orange;}.box3 {/*类选择器选中最内层盒子*/color: red;}</style></head><body><div class="box1 first"><div id="box2"><div class="box3"><p>文字是什么颜色？</p> /*均未直接选中p*/</div></div></div></body></html>

按理说，单独比较选择器权重的话，文字应该是orange橘色，但是这里的选择器选中的都是<p>的祖先级，所以这个时候，用就近原则。最内层的盒子box3赋予的样式是red红色。

第二步示例：
下面代码中，选择器选中的都是p的祖先级，但其中有距离相同的两个选择器都选中了中层的盒子：

// 测试代码<DOCTYPE html><html><head><title>选中祖先级，未选中目标元素,其中有距离相同的</title><style>div #box1 {/*后代选择器，选中外层盒子*/color: blue; }#box2 {/*id选择器，选中中层盒子*/color:orange;}.b2 {/*类选择器，选中中层盒子*/color: red;}</style></head><body><div id="box1"><div id="box2" class="b2"><div><p>文字是什么颜色？</p></div></div></div></body></html>

这时候有两个选中中层盒子，都是距离p元素最近的盒子；
则比较二者选择器的权重，这一部分可以回顾选择器权重；id选择器权重大于类选择器，所以显示橙色。

第三步示例：

// 测试代码<DOCTYPE html><html><head><title>选中祖先级，未选中目标元素,其中有距离相同的，且权重相同的</title><style>div #box1 {/*后代选择器，选中外层盒子*/color: blue;}.box2 {/*类选择器，选中中层盒子*/color:orange;}.b2 {/*类选择器，选中中层盒子*/color: red;}</style></head><body><div id="box1"><div id="box2" class="b2"><div><p>文字是什么颜色？</p></div></div></div></body></html>

选中祖先级，未选中目标元素,其中有距离相同的，且权重相同的，后写的层叠先写的。
文字显示未red红色。

3. ! important 关键字

遇见一个!important关键字，权重会提升到最大；书写位置∶在某个CSS属性的属性值后面空格加!important；

注意∶
①就近原则中，不需要比较选择器权重，所有!important会失效。（比较权重的时候才发挥作用）
②!important不能提升选择器的权重，只能提升某条属性的权重到最大。

示例：

// 测试代码<DOCTYPE html><html><head><title>!important的作用</title><style>div#box1 p.first {/*单独比较选择器权重赢家*/color: blue ;}div.b1 p.first {/*但是这边有个！important*/color:orange !important;}</style></head><body><div id="box1" class="b1"><p class="first">文字是什么颜色？</p></div></div></body></html>