问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

为什么span不能继承font-size

头像
普通程序员
    4k815

    如题

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <style>
        *{
            font-size:0;
            margin:0;
            padding:0;
        }
        .container{
            margin-top:20px;
            background-color: orange;
            font-size:20px !important;
            line-height: 1;
        }

    </style>
</head>
<body>
    <div class="container">
        <span style="background-color: #fff;">xxxx</span>
    </div>
</body>
</html>

    clipboard.png
    不能显示span里的内容

    csshtml
    阅读 8.6k
    5 个回答
    得票最新
    头像
    dodomonster
      2.1k51928
      ✓ 已被采纳

      如上各位兄台所说，span的字体是可以继承父样式的字体的，可是呢，因为涉及到css优先级问题，通配符优先级大于继承而来样式的优先级，所以span获得的字体样式来自于通配符。有图有真相：

      clipboard.png

      头像
      Dont
        7k163552

        用chrome打开console对着看看，不是不继承，是*{}先动的手

        clipboard.png

        头像
        michael_cai
          10.6k2840

          因为继承的属性被你用

          *{
    font-size:0;
    margin:0;
    padding:0;
}

          覆盖掉了，这个优先级比继承属性高。

          头像
          脑补剑士
            1728

            通配选择符的优先度要高于继承，所以你的字体大小是0而不是20，具体可以找一下css权威指南，里面有详细的说明

            头像
            ezmo
              7.3k2633

              原因：渲染的优先级

              因为你用了通配符*设定了字体大小为0，虽然你给container设定了字体大小20px，但是不好意思，*的优先级更高，所以字体大小为0，当然看不到了。

              慎用通配符

              *优先级是很高的，他的作用域很大，影响父元素其下的所有子元素。所以，你的页面层次越复杂，重复继承和渲染的次数就越多，影响性能，当然了，现在机器配置都这么高，也比较难看出来。
              不要在在深层次的页面结构中使用它；不要在页面的根节点使用它；不要在距离目标节点较远的节点上使用它。最好在父级元素中使用。这样效果和性能可以兼得。

              撰写回答
              你尚未登录，登录后可以
              • 和开发者交流问题的细节
              • 关注并接收问题和回答的更新提醒
              • 参与内容的编辑和改进，让解决方法与时俱进
              推荐问题