css选择器权重、样式继承、默认样式

2023-08-22 09:03:04

学过css的小伙伴都是指css选择器的权重

!important 　　Infinity
行间样式　　 1000
id 　　　　　 100
class|属性|伪类 10
标签|伪元素　　 1
通配符　　　　　0

权重相同

相同css文件：写在后面的起作用
不同css文件：后导入的起作用

但今天遇到一个问题

<body>

    <div style="color: red">

        <span>123</span>

    </div>

</body>

却是这样的

div上设置的样式并没有对span上的标签起作用
原因就是

我在通配符上设置了颜色

*{

            padding: 0;

            margin: 0;

            color: #3c3c3c;

        }

span并没有继承div的样式，而是使用了通配符的样式

这就说明只有当自身没有样式定义时才会去继承样式

<div style="color: red">

        <a href="#">123</a>

    </div>

很明显，默认样式也是对自身样式的定义，所以有默认样式的时候也无法继承样式

综上可以理解为

　　权重：通配符>默认样式>继承样式

码农公寓