CSS权重与继承解析-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_53977993/article/details/127325877

本文介绍了CSS中的样式冲突解决机制，重点讲述了选择器的权重计算原则，包括！important的最高优先级、选择器权重的累加计算以及相同优先级时的选择。此外，还探讨了CSS的样式继承特性，说明了哪些样式可以被后代元素继承，帮助优化前端开发效率。

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

样式冲突？

选择器的权重

样式继承

样式冲突？

通过不同的选择器选中同一个元素，进行一样的样式设定，发生样式冲突时，应用哪一个样式呢？

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

选择器的权重

                                                        权重占比
           !important    最高优先级                       无穷大
           内联样式                                       1000  
           id选择器                                       100
           类和伪类选择器/属性选择器                       10
           元素选择器                                     1
           通配符、子选择器、相邻选择器等。如*、>、+...     0000
           继承的样式     没有优先级                       无穷小

图上的数字不是说明起权重的大小，而是直观的比较权重的优先级。

注意：

1、!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>
        div{font-size: 60px;}
        #da{color: aqua;}
        .dd{color: orange !important;}
    </style>
</head>
<body>
    <div id="da" class="dd" style="color: black;">慧感后，仍中土，为。</div>
</body>
</html>

显示结果：

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

<style>
        div{font-size: 60px;}
        .dd{color: aqua;}
        div.dd{color:red;}
</style>

显示结果：

3、 (并集选择器)分组选择器是单独计算的

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

<style>
        div{font-size: 60px;}
        #da{color:red;}
        #da,.dd{color: aqua;}
</style>

显示结果：

5、选择器的累加，不会超过上一级数量级。

(注意：类选择器再高也不会超过id选择器，量变达不到质变)

<!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>
        div{font-size: 60px;}
        #da{color:purple;}
        .dd.d1.d2.d3{color: aqua;}
    </style>
</head>
<body>
    <div id="da" class="dd d1 d2 d3">慧感后，仍中土，为。</div>
</body>
</html>

显示结果：

样式继承

利用继承，可以将一些通用的样式(例如：字体的大小，颜色，行高，字体，最小宽度...)设置到共同的祖先元素上，这样所有的后代元素都可以自动继承这些样式，方便我们进行开发。

<!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>
       body{
        font-size: 50px;
        color:brown;
        line-height: 100px;
        font-family: 宋体;
       }
    </style>
</head>
<body>
    <p>
        <span>无要中谢宋十说，久。<em>当没主秦。</em></span>
    </p>
    <span>生马胸主你灰才重第。</span>
</body>
</html>

显示结果：

注意：并不是所有的样式都会被继承，比如背景相关的、布局相关的等不会被继承。

<!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>
        body{
          font-size: 20px;
          color:brown;
          line-height: 40px;
          font-family: 宋体;
        }
        p{
          background-color: green;
        }
    </style>
</head>
<body>
    <p>才丰不首、仍可法倒。<span>无要中谢宋十说，久。<em>当没主秦。</em></span></p>
    <span>无要中谢宋十说，久。<em>当没主秦。</em></span>
</body>
</html>

显示结果：