优先级注意的问题_p继承的权重为 0-CSDN博客

本文链接：https://blog.csdn.net/weixin_42900834/article/details/123163777

本文介绍了CSS权重的计算规则，强调了权重由四组数字组成且无进位，以及等级判断方式。通过实例展示了类选择器、ID选择器、行内样式表和通配符的权重值。重点解析了继承权重为0的概念，即使父元素权重高，子元素如果没有直接选择也会继承0权重。并提供了代码示例来说明即使加了`!important`，也无法改变子元素的样式。此外，还探讨了如何通过直接选择标签来更改样式，展示了多个标签样式的优先级情况。

摘要由CSDN通过智能技术生成

1.权重是有4组数字组成，但是不会有进位

2.等级判断从左向右，如果某一类数值相同，则判断下一位数值

3.简单的记忆方法：通配符和继承权重为0，类（伪类）选择器为10，id选择器100，行内样式表为1000，！important无穷大

*4.继承的权重为0，如果该元素没有直接选中，不管父元素权重多高，子元素得到的权重为0

重点：例如父亲的权重为100，p继承的权重为0，所以样式为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>CSS权重</title>

     <style>
           /* 父亲的权重为100 */
           #father{
                    color:pink;
           }

           /* p继承的权重为0,*/
           p{
                    color: red  ;
           }
     </style>

</head>

<body>
        <div id="father">
              <p>CSS权重</p>
        </div>   
</body>

</html>

运行效果：

哪怕父亲样式后面加上!important也不起效果，p继承的权重为0，当p中写入样式时，权重为1，所以样式为p

标签到底执行哪个样式，就先看这个标签有没有直接选出来

5.更改标签样式、

代码：

<!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>CSS权重</title>

     <style>
           /* 父亲的权重为100 */
           #father{
                    color:pink;
           }

           /* p继承的权重为0,*/
           p{
                    color: red  ;
           }

           body{
                    color: red;
           }

           a{
                  color: green;
           }

     </style>

</head>

<body>
        <div id="father">
              <p>CSS权重</p>
        </div>   

        <a href="#">我是单独的样式</a>
</body>

</html>

运行效果：