05-CSS 层叠式

最新推荐文章于 2024-07-12 20:49:16 发布

落日橙子乳酸菌

最新推荐文章于 2024-07-12 20:49:16 发布

阅读量98

点赞数

分类专栏： HTML5 网页开发 # CSS基础文章标签： css 前端 Powered by 金山文档

本文链接：https://blog.csdn.net/m0_48670609/article/details/131423528

版权

HTML5 网页开发同时被 2 个专栏收录

20 篇文章 2 订阅

订阅专栏

CSS基础

5 篇文章 0 订阅

订阅专栏

CSS 的概念中，除了前面提到的样式外，还有一个重要的概念就是层叠式，层叠式是贯穿整个css的一个性质，包含继承性和层叠性。

一、继承性

• 如果一个标签没有设置过一些样式，它的某个祖先级曾经设置过，在浏览器中该标签也加载了这些样式，这些样式都是从祖先级继承而来，这种现象就是继承性。 • 能够被继承的样式是所有的文字相关样式属性，其他的属性都不能被继承。例如盒模型属性、背景样式等就不能被继承。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1 {
            width: 200px;
            height: 200px;
            background-color: pink;
            color: red;
            font-family: "宋体";
            font-size: 14px;
        }
    </style>
</head>
<body>
    <h2>这是一个二级标题</h2>
    <div class="box1">
        <ul>
            <li><p>这是box1标签内部的段落</p></li>
            <li><p>这是box1标签内部的段落</p></li>
            <li><p>这是box1标签内部的段落</p></li>
            <li><p>这是box1标签内部的段落</p></li>
        </ul>
    </div>
</body>
</html>

样式都设置给了box1，文字是书写在p标签之内的，p标签内的文字也加载了字体为宋体字号为14像素文字颜色为红色的效果，p标签继承了来自父元素的样式，这就是继承。

但是并不是所有属性都被继承，即高度宽度和背景颜色并未被继承。

判断一个属性是否被继承，看控制台（右键-->检查）在Elements中找到一个 p 标签，点击，右侧Style面板可以看到 p 标签设置的样式。

继承性应用

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

    <style>
        body {
            color: red;
            font-family: "宋体";
            font-size: 14px;
        }
        .box1 {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>

二、层叠性

• 思考问题：同一个标签可以被多个选择器选中，如果选择器后面设置了相同的样式属性，标签最终该加载哪个？或者，在继承性中，如果多个祖先都设置了相同的文字样式，后代中该继承哪个祖先级的？ • 解决方法：就是使用层叠性去解决冲突。多个选择器在进行对比的过程中，最终只有一个属性会成功加载，它会层叠、覆盖掉其他的属性。 • 判断最终胜出的属性是谁，需要依赖判断优先级。

判断方法

选中目标标签

第一步：比较多个选择器的权重即优先级，权重高的层叠权重低的。 • 基础选择器的权重比较方法：根据选择范围，范围越大权重越小，权重大小：通配符 * < 标签选择器 < 类选择器 < id 选择器。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       /* 通配符选择器（选中所有标签） */
       * {
        color: red;
       }
       /* 标签选择器 */
       p {
        color: green;
       }
       /* 类选择器 */
       .demo {
        color: yellow;
       }
       /* id选择器 */
       #ps {
        color: blue;
       }
    </style>
</head>
<body>
    <p class="demo" id="ps">观察文字颜色</p>
</body>
</html>

查看选择器优先级的小技巧：

打开控制台，找到Elements，选中相关标签比如p 标签，右侧可以看到与它相关的样式，关于文字颜色样式设置有上下之分，把id 选择器放到了最上面，接下来是类选择器、标签选择器、通配符选择器，这就表示了优先级。所以以后可以不用自己思考，打开控制台直接看哪一个选择器的权重更高即可，最高的优先级最大。示例中只有blue没有划线，其他颜色属性都被划掉，也就意味着层叠性发挥了作用，blue 把另外三个 color 属性层叠掉了。

• 高级选择器权重比较方法：依次比较组成高级选择器的 id 的个数，类的个数，标签的个数，如果前面能够比较出大小就不再比较后面，如果前面相等就往后比较，直到比较出大小。 • 比较顺序：( id 个数, 类的个数, 标签的个数 )

高级选择器中注意并集选择器：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      #box1.box2 .demo, .box1 #box2 #ps {
        color: red;
      }
      .box1 .box2 #box3 .demo {
        color: green;
      }
    </style>
</head>
<body>
    <!-- 书写代码时写 .box1#box1>.box2#box2>.box3#box3>p -->
    <div class="box1" id="box1">
        <div class="box2" id="box2">
            <div class="box3" id="box3">
                <p class="demo" id="ps">观察文字颜色</p>
            </div>
        </div>
    </div>

    
</body>
</html>

注意：并集选择器只是合并，并不是一个完整的选择器，而是两个选择器合并到一起，因此比较权重时并集选择器应该分别拆开来看，第一个部分 ( id 个数, 类的个数, 标签的个数 ) 是 1 2 0，第二个是 2 1 0，第三个是 1 3 0，第二个的 id 选择器个数最多所以文字显示红色

第二步：如果选择器权重都相同，需要比较 CSS 中代码的书写顺序，后写的层叠掉先写的，显示后写的，因为后加载，也可以理解为距离标签近就近原则。

选中目标标签的组先级

如果选择器选中的标签不是目标标签本身，而是目标标签的祖先级，文字的样式可以被继承。

第一步：就近原则，比较选择器选中的祖先级在 HTML 结构中距离目标标签的远近，近的层叠远的。即：从父亲那里继承来的层叠掉从祖父那里继承来的。这个过程不判断权重问题，只判断关系远近。

下面示例中文字颜色显示为蓝色blue，因为box3距离p标签最近。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
     #box1 {
        color: red;
     }
     .box2 {
        color: green;
     }
     .box3 {
        color: blue;
     }
    </style>
</head>
<body>
    <!-- 书写代码时写 .box1#box1>.box2#box2>.box3#box3>p -->
    <div class="box1" id="box1">
        <div class="box2" id="box2">
            <div class="box3" id="box3">
                <p class="demo" id="ps">观察文字颜色</p>
            </div>
        </div>
    </div>
</body>
</html>

第二步：如果选中的祖先级距离目标一样近（同一个祖先级），比较选择器权重，权重大的层叠权重小的。

下面示例中文字颜色显示为黄色 yellow，因为同样选中box3，id选择器权重高于类选择器。

    <style>
     .box3 {
        color: blue;
     }
     #box3 {
        color: yellow;
     }
    </style>

第三步：如果距离一样近，权重也相同，最后比较 CSS 中的书写顺序，后面的层叠前面的。

! important 关键字

• 如果在比较选择器权重的过程中，遇见一个 !important 关键字，可以将某条 CSS 样式属性的权重提升到最大。注意：是将CSS样式属性的权重提到最大，不会改变选择器的权重。 • 书写位置：在某个css属性的属性值后面空格加 !important

注意： ① 就近原则中，不需要比较选择器权重，所有 important 会失效。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
     .box2 {
        color: blue !important;
     }
     #box2 .box3 {
        color: yellow;
     }
    </style>
</head>
<body>
    <!-- 书写代码时写 .box1#box1>.box2#box2>.box3#box3>p -->
    <div class="box1" id="box1">
        <div class="box2" id="box2">
            <div class="box3" id="box3">
                <p class="demo" id="ps">观察文字颜色</p>
            </div>
        </div>
    </div>
</body>
</html>

文字显示为黄色。在就近原则中不需要比较权重，上面选择器选中box2，下面选择器选中 box3，box3距离 p 更近，所以还是会加载box3的，!important失效。

② important 不能提升选择器的权重，只能提升某条属性的权重到最大。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
     .box3 {
        color: blue !important;
     }
     #box2 .box3 {
        color: yellow;
     }
    </style>
</head>
<body>
    <!-- 书写代码时写 .box1#box1>.box2#box2>.box3#box3>p -->
    <div class="box1" id="box1">
        <div class="box2" id="box2">
            <div class="box3" id="box3">
                <p class="demo" id="ps">观察文字颜色</p>
            </div>
        </div>
    </div>
</body>
</html>

文字颜色显示为蓝色。但是选择器的权重没有发生变化，仍然高于 .box3选择器。

行内式

• 行内式一定选中的是标签自己，所以行内式比其他选择器的权重都要高，不管这些选择器是写在与内嵌式还是外链式，行内式的权重最高。

• 但是，与 !important 关键字相比权重要低。

总结：行内式权重高于所有其他选择器，但是低于important关键字。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
     .box2 {
        color: blue !important;
     }
     #box2 .box3 {
        color: yellow;
     }
    </style>
</head>
<body>
    <!-- 书写代码时写 .box1#box1>.box2#box2>.box3#box3>p -->
    <div class="box1" id="box1">
        <div class="box2" id="box2">
            <div class="box3" id="box3">
                <p class="demo" id="ps" style="color: pink;">观察文字颜色</p>
            </div>
        </div>
    </div>
</body>
</html>

上面文字颜色显示粉色。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
     .box2 #ps{
        color: blue !important;
     }
     #box2 .box3 {
        color: yellow;
     }
    </style>
</head>
<body>
    <!-- 书写代码时写 .box1#box1>.box2#box2>.box3#box3>p -->
    <div class="box1" id="box1">
        <div class="box2" id="box2">
            <div class="box3" id="box3">
                <p class="demo" id="ps" style="color: pink;">观察文字颜色</p>
            </div>
        </div>
    </div>
</body>
</html>

上面文字显示蓝色，因为行内式和第一个选择器都选中了，但是important权重高于行内式。