CSS的优先级是什么？ [英] What is the order of precedence for CSS?

问题描述

我想知道为什么我的一个css类似乎重写了另一个（而不是其他方式）

I'm trying to figure out why one of my css classes seems to override the other (and not the other way around)

这里我有两个css类

    .smallbox { 
    background-color: white;
    height: 75px;
    width: 150px;
    font-size:20px;
    box-shadow: 0 0 10px #ccc;
    font-family: inherit;
 }

 .smallbox-paysummary {
    @extend .smallbox; 
    font-size:10px;

 }

在我看来，我叫

<pre class = "span12 pre-scrollable smallbox-paysummary smallbox "> 

字体（重叠元素）显示为10px，而不是20 -

The font (The overlapping element) shows up as 10px instead of 20 - could someone explain why this is the case?

推荐答案

有几个规则（应用于此顺序）：

There are several rules ( applied in this order ) :

• inline css（html style属性）覆盖样式标签和css文件中的css规则


• 更具体的选择器优先于较不具体的选择


• 如果二者具有相同的特异性，则稍后出现在代码中的规则会覆盖之前的规则。

在您的情况下，适用的规则3。

In your case its rule 3 that applies.

这篇关于CSS的优先级是什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！