样式的继承学习-尚硅谷源代码_div.box1的权重是多少-优快云博客

本文链接：https://blog.youkuaiyun.com/chenshuangzhi/article/details/126091032

本文详细介绍了CSS中的样式继承概念，说明了哪些样式可以被继承，哪些不能，并通过代码示例展示了样式如何在元素间传递。此外，还深入探讨了选择器的权重，解释了当不同选择器设置相同元素的样式时，如何根据权重确定最终显示的样式。文中还提到了`!important`的使用及其注意事项，并提供了实际代码来演示权重计算和样式冲突的解决过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

一、样式的继承
二、选择器的权重

一、样式的继承

样式的继承，我们为一个元素设置的样式同时也会应用到他的后代元素上

继承是发生在祖先和后代之间的

继承的设计是为了方便我们的开发，利用继承我们可以将一些通用的样式统一设置到共同的祖先元素上，我们只需要设置一次即可让所有的元素的元素都具有该样式。

注意:

并不是所有的样式都会被继承:

比如背景相关的，布局相关的这些样式都不会继承。

代码如下（示例）：

<!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>样式的继承</title>
    <style>
    
    /* 这个时候我们设置了p元素的字体颜色和背景颜色，发现在p元素里的span元素样式也和p元素一致，这是发生了继承 */
    p{
            color: red;
            background-color: orange;
        }

    /* 此时div里的子元素和后代元素都继承了div的样式 */
    div{
            color: chocolate;
        }
    </style>
</head>
<body>
    <p>
        我是一个p元素
        <span>我是p元素中的span</span>
    </p>
    <span>我是p元素外的span</span>

    <div>我是div
        <span>我是div里面的span
            <em>我是span里面的em</em>
        </span>
    </div>
</body>
</html>

二、选择器的权重

样式的冲突

-当我们通过不同的选择器，选中相同的元素，并且为相同的样式设置不同的值，此时就发生了样式的冲突。

发生样式的冲突时，应用哪个样式由选择器的权重（优先级）决定

选择器的权重

        内联样式 1,0,0,0(不建议用内联样式，后面想通过样式表去改，可就改不了了，因为他的优先级高，别的样式没法对他进行覆盖)

        id选择器 0,1,0,0

        类和伪类选择器 0,0,1,0

        元素选择器 0,0,0,1

        通配选择器 0,0,0,0

        继承的样式没有优先级

比较优先级时，需要将所有的选择器的优先级进行相加计算，最后，优先级越高，择越优先显示



（分组选择器是单独计算的）选择器的累加不会超过其最大的数量级,例如:类选择再高也不会超过id选择器

        如果优先级计算后相同，此时则优先使用靠下的样式。

        我们还可以在某一个样式的后边添加!important, 则此时该样式会获取到最高的优先级，甚至超过内联样式

注意:在开发中这个玩意一定慎用！

代码如下（示例）：

<!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>选择器的权重</title>
    <style>

    #box1{
            color: rosybrown;
        }

    /* 这里优先级要把元素选择器的权重1，加上id选择器的权重100，所以div#box1的权重是101 */
    div#box1{
            color: blueviolet;
        }
    
    /* 这个是分组选择器，div#box1权重是101，p的权重是1，所有这个权重是101 */
    div#box1,p{
            color:orange;
            
        }

    .xixi{
            color: #bfa;
            font-size: 20px;
        }

    /* d1和xixi的优先级一样，此时则优先使用靠下的样式 */
    .d1{
            color: blue;
        }

    /* 此时我们可以看到div的字体大小是20px,因为前面类元素选择器设置了大小，
       类元素选择器比通配选择器优先级高，
       但是我们看到span元素字体大小也变了，这是因为我们没有单独设置span元素字体大小，span在这里是继承div的样式
            继承的样式没有优先级，所有span的字体就被通配选择器设置为50px */
        
    *{
            font-size: 50px !important;
            color: fuchsia;
        }

    </style>
</head>
<body>
    
    <div id="box1" class="xixi d1" style="color:chocolate;">我是一个div
        <span>我是div里面的span</span>
    </div>
    <p>我是p元素</p>
</body>
</html>

此笔记来自于跟尚硅谷老师学习自己所写，用于自我复习