CSS的三大特性（层叠、继承、优先）看这篇就够了！

EliBi
94 阅读5分钟

前言

CSS的三大特性及其衍生知识点

一、层叠性

同选择器同样式的情况下，遵循“就近原则”，举例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            font-size: 12px;
            color: aquamarine;
        }
        div{
            font-size: 23px;
        }
    </style>
</head>
<body>
    <div>这是一个层叠样式示例</div>
</body>
</html>

Snipaste_2022-07-22_20-53-41.png 如图所示：图中绿框的是下一个div没有的，直接被div标签使用，但相同重复的样式font-size则采用就近原则，红色箭头是div标签在就近原则下使用就近div为font-size为23px的值。

结果如下：

Snipaste_2022-07-22_21-05-01.png

二、继承性

一般来说继承的是父类的某些样式，如文本和字号，如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            border: 1px solid red;
            font-size: 18px;
            color: green;
            width: 300px;
            height: 100px;
            margin: 20px;
            padding: 10px;
        }
        p{
            border: 1px dashed blue;
        }
    </style>
</head>
<body>这是直接写在body上的文字
   <p>这是继承body标签显示出来的样式</p>
</body>
</html>

Snipaste_2022-07-22_21-41-34.png 如图所示：以图中p标签和body标签举例，p是body的类，body是p的父类，为了展示p不能继承父类的盒模型的样式，例如margin和padding，以及宽高。而只能继承某些文本样式的特点，采用边框说明的更清楚一些。通过结果图可见，代码区域的蓝色边框的文本样式都已被继承，而棕色边框的样式都没有，在结果图中，p的边框并没有margin和padding还有height和width的值，说明p只能继承某些父类的样式，如：text-，font-，line-这些元素开头以及color样式可继承。

结果如下：

Snipaste_2022-07-22_22-00-39.png

行高的继承

行高作为一种特殊的继承，下面来着重介绍一下，如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            color: pink;
            /* font: 12px/24px 'Microsoft YaHei'; */
            font: 12px/1.5 'Microsoft YaHei';
        }
        div {
            /* 子元素继承了父元素 body 的行高 1.5 */
            /* 这个1.5 就是当前元素文字大小 font-size 的1.5倍   所以当前div 的行高就是21像素 */
            font-size: 14px; 
        }
        p {
            /* 1.5 * 16 =  24 当前的行高 */
            font-size: 16px;
        }
        /* li 么有手动指定文字大小  则会继承父亲的 文字大小  body 12px 所以 li 的文字大小为 12px 
        
        当前li 的行高就是  12 * 1.5  =  18
        */
    </style>
</head>
<body>
    <div>这是一个div标签</div>
    <p>这是一个p标签</p>
</body>
</html>

Snipaste_2022-07-22_22-30-41.png 如图所示：div和p标签都是body标签的子类，其中的绿框font-size的值与父类font的值都不同，行高的继承之所以不同，在于子类的文字大小样式（font-size）不同，行高跟随其变化，父类样式font:12px/1.5中的1.5表示：凡是body标签下面的子类的行高，如果有设置文字大小，那行高为其子类文字大小的1.5倍，没有设置则为默认值121.5=18，所以div设置了文字大小，其行高应该为141.5=21，同理p的行高应该为16*1.5=24。

结果如下（红圈表示）：

Snipaste_2022-07-22_22-45-09.png

Snipaste_2022-07-22_22-45-34.png

三、优先级

当一个元素指导多个选择器就会产生优先级。

  • 选择器相同，则执行层叠性（就近原则）
  • 选择器不同，则根据选择器权重执行

那对于选择器不同的情况下用哪个选择器，选谁，我们用权重来决定，那什么是权重？

权重

image.png 权重（优先级）注意点：

  1. 权重是有4组数字组成,但是不会有进位。
  2. 可以理解为类选择器永远大于元素选择器, id选择器永远大于类选择器,以此类推...
  3. 等级判断从左向右，如果某一位数值相同，则判断下一位数值。
  4. 可以简单记忆法: 通配符和继承权重为0, 标签选择器为1,类(伪类)选择器为 10, id选择器 100, 行内样式表为1000, !important 无穷大。
  5. 继承的权重是0， 如果该元素没有直接选中，不管父元素权重多高，子元素得到的权重都是 0。

举个例子：

不同选择器下的优先级关系：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #nihao{
            color: purple;
        }
        .kaixin{
            color: blue;
        }
        div{
            color: red !important;
        }
    </style>
</head>
<body>
    <div class="kaixin"  id="nihao" style="color: green;">这是一个关于优先级的div标签</div>
</body>
</html>

image.png 那到底div标签到底显示哪个？关于这个问题，那当然是红色啦，你猜为啥，我们来一一解释一下，给的表格中的权重由高到低比较大小为：!important>行内样式>id选择器>类选择器和伪类选择器>元素选择器>继承或*，一开始css里的div先起作用，颜色变为红色（没写!important），增加了类选择器，其颜色变为蓝色，又增加了id选择器，其颜色变为紫色，然后再在div标签里添加了style行内样式，变为绿色，但最后又在原来的div标签里增加了!important，让其权重为最高。为了解释到所有选择器的权重，就于是绕了一圈哈哈哈。

结果如下：

image.png

继承下的优先级关系：

这是父有样式，子没样式的优先级：

因为子元素p没有样式，所有继承了父元素div的样式，颜色变为绿色，如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #father{
            color: green;
        }
    </style>
</head>
<body>
    <div id="father">
        <p>这是一个继承了div的p标签</p>
    </div>
</body>
</html>

image.png 结果如下：

image.png

继承下的优先级关系： 这是父有样式，子也有样式的优先级：

因为子元素p有样式，根据继承的父类权重，p继承过来的权重值应为0，不论父类有有最高权重!important，其颜色值优先应为子类p选择器设置的样式，所以颜色变为粉色，权重：被继承的子类选择器的权重永远大于父类选择器继承的权重，如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 父亲的权重为100 */
        #father{
            color: green!important;
        }
        /* p继承的权重为0 */
        p{
            color: pink;
        }
    </style>
</head>
<body>
    <div id="father">
        <p>这是一个继承了div的p标签</p>
    </div>
</body>
</html>

image.png 结果如下：

image.png

权重的叠加

如果是复合选择器，则会有权重叠加，需要计算权重，权重虽然会叠加，但是永远不会有进位。 例如：

  • div ul li ------> 0,0,0,3
  • .nav ul li ------> 0,0,1,2
  • a:hover -----—> 0,0,1,1
  • .nav a ------> 0,0,1,1

具体实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ol{
            list-style: none;
        }
        /* #bbb li权重 0,1,0,0 + 0,0,0,1 = 0,1,0,1    101*/
        #bbb li{
            color: purple;
        }
        /* .aaa li权重 0,0,1,0 + 0,0,0,1 = 0,0,1,1    11*/
        .aaa li{
            color: green;
        }
         /* ol li权重 0,0,0,1 + 0,0,0,1 = 0,0,0,2    2*/
        ol li{
            color: red;
        }
        /*li权重 0,0,0,1    1*/
        li{
            color: yellow;
        }
    </style>
</head>
<body>
    <ol class="aaa" id="bbb">
        <li>这是一个li标签</li>
    </ol>
</body>
</html>

image.png 其中最大权重为#bbb li的复合选择器，为101，大于其中所有的复合选择器，权重值都已给出，所以结果文字颜色为紫色。

结果如下：

image.png

四、总结

css的三大特性的主要知识已全部介绍完，里面的很多知识都较为容易，希望此文章能够帮助到大家，感谢阅读不足之处请大家指点指点

如需要引用此文章，请写明出处。

avatar
文章
阅读
粉丝