码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2020-02-04 10:28:46      阅读:113      评论:0      收藏:0      [点我收藏+]

标签:src   没有   bsp   http   颜色   important   mic   span   标签   

学过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>

技术图片

 

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

 

综上可以理解为

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

 

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

标签:src   没有   bsp   http   颜色   important   mic   span   标签   

原文地址:https://www.cnblogs.com/angle-yan/p/12258334.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!