[解決済み] CSSの優先順位は？

質問

なぜ私のcssクラスの1つが他のものを上書きするのか（他の方法ではありません）、その理由を考えています。

ここに2つの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 "> 

フォント（オーバーラップする要素）が20ではなく10pxと表示されるのですが、なぜそうなるのか、どなたか教えてください。

解決方法を教えてください。

いくつかのルールがあります（この順番で適用されます）。

1. インラインCSS（htmlスタイル属性）は、styleタグとCSSファイル内のCSSルールを上書きする。
2. より詳細なセレクタは、より詳細でないセレクタよりも優先されます。
3. のルールは、両方とも同じ特異性を持っている場合、先に現れたルールを上書きします。
4. cssルールに !important が常に優先されます。

あなたの場合、ルール3が適用されます。

単一のセレクタを高いものから低いものへと指定します。

• のID（例． #main が選択する <div id="main"> )
• クラス（例． .myclass )、属性セレクタ(ex: [href=^https:] ) と擬似クラス (例: :hover )
• 要素（例． div ) と擬似要素 (例． ::before )

2つのセレクタを組み合わせた場合の特異性を比較するには、上記の特異性グループごとに、単一のセレクタの出現回数を比較します。

例：比較 #nav ul li a:hover から #nav ul li.active a::after

• id セレクタの数を数える: それぞれに 1 つずつある ( #nav )
• クラスセレクタの数を数える: それぞれに1つずつある ( :hover と .active )
• 要素セレクタの数を数える：3つある ( ul li a )は1つ目、2つ目は4つ目です( ul li a ::after のように、2つ目の複合セレクタの方がより具体的です。

CSSセレクタの特異性についての良い記事 .