html - css 优先级，firefox 中的大多数特定选择器错误或行高计算不起作用？

Question

CSS

.card {
    line-height: 50px;
    padding: 0 5px;
}

.card .multi-material
{
    line-height:25px;
}

HTML

<div class="card">
    <div class="row">
        //Other columns
        <div class="col-xs-4 text-center text-ellipsis">
            <span class="pull-left material-quantity multi-material">9x  </span>
        </div>
        //Other columns
    </div>
</div>

对于上述场景中的跨度，firebox 将行高设置为 50，即使最具体的选择器说 25。然而 Chrome 没问题，使用 25。

查看 firefox 检查器给出的内容:

应该如何解决这个问题？

仅供引用:如果有任何帮助，CSS 将使用 LESS 生成。

Answer 1

您的选择器没有达到您想要达到的目的。在您当前的代码中，您尝试更改子项的行高。但是行高之前应用于父级 (.card) 而不是子级。

你需要更多类似的东西:

.card span {
    line-height: 50px; // need a unit measurement here, added px
    padding: 0 5px;
}

.card span.multi-material
{
    line-height:25px; // need a unit measurement here, added px
}