CSSの優先順位は何ですか？

109

私の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と表示される-これが事実である理由を誰かが説明できますか？

html css

— スティーブン
ソース

2

CSSプリプロセッサを使用していますか？@extend .smallbox;非標準のcSSのように見えます。

— Jared

あなたは本当に組み合わせるべきではありません@extend-それが私がそれをやると思うなら-そして、同じ要素で両方のセレクターを使うことです。

— ミリムース

SMACSSは、変更されたプロパティのみを「サブクラス」（つまり.smallbox-paysummary）に含めることを推奨しているようです。また、オプションで、.smallbox.smallbox-paysummary { font-size: 10px; }

— millimoose

1

また、.smallbox-paysummaryフォントを小さくしたくない場合は、なぜそもそもフォントを小さくするのですか？

— ミリムース2016

ここで、両方のルールに同じ特異性がある場合、CSSルールの順序に関係なく、要素のクラス属性で後で宣言されたルールが優先されないのはなぜでしょうか。

— アンディ

186

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

インラインcss（htmlスタイル属性）は、スタイルタグとcssファイルのcssルールをオーバーライドします
より具体的なセレクターは、具体性の低いセレクターよりも優先されます
コードの後半に現れるルールは、両方が同じ特異性を持つ場合、以前のルールをオーバーライドします。
のCSSルール !important常にが優先されます。

あなたの場合、適用されるそのルール3。

最高から最低までの単一セレクターの特異性：

ID（例：#main選択<div id="main">）
クラス（例：）.myclass、属性セレクター（例：）[href=^https:]、および疑似クラス（例：:hover）
要素（例：div）と擬似要素（例：::before）

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

例：比較#nav ul li a:hoverする#nav ul li.active a::after

idセレクターの数を数える：それぞれに1つ（#nav）
クラスセレクターの数を数える：それぞれに1つ（:hoverおよび.active）
要素セレクターの数を数えます：ul li a最初の3（）と2番目の（ul li a ::after、2番目のセレクターには）があるため、2番目の組み合わせセレクターはより具体的です。

CSSセレクターの特異性に関する優れた記事。

— ローレンツ・マイヤー
ソース

特異性はインラインスタイル宣言をどのようにオーバーライドしますか？

— Jared Farrish 2014

3

"...スタイルタグのcssルール... cssファイルのルールをオーバーライドします"。最近、この神話を数回目にしました。どこから来たのかはわかりませんが、ナンセンスです。

— Alohci 2014

@jared最初の2つのポイントを入れ替えました。これってどういう意味？

— Lorenz Meyer

はい、それが私が意図したことでした。

— Jared Farrish 2014

2

@PakiPat :hoverはクラスセレクターではなく、疑似クラスセレクターです。

— Lorenz Meyer

30

次に、図のCSSスタイル設定順序のコンパイルを示します。CSSルールの方が優先度が高く、残りのルールよりも優先されます。

免責事項：私のチームと私はこの記事をブログの投稿（https://vecta.io/blog/definitive-guide-to-css-styling-order）と一緒に作成しました。これはすべてのフロントエンドに役立つと思います開発者。

— 秦
ソース

3

その図には特別な考え方が必要です。私にとって、この図を理解するのは、スタイルの継承自体よりもはるかに困難です。

— Lorenz Meyer

10

ここで私たちが見ているのは、Mozillaが述べているように、特異性と呼ばれています

特異性とは、ブラウザがどのCSSプロパティ値が要素に最も関連性があり、したがって適用されるかを決定する手段です。特異性は、さまざまな種類のCSSセレクターで構成されるマッチングルールに基づいています。

特異性は、特定のCSS宣言に適用される重みであり、一致するセレクター内の各セレクタータイプの数によって決定されます。複数の宣言の特異性が等しい場合、CSSで見つかった最後の宣言が要素に適用されます。特定性は、同じ要素が複数の宣言の対象となっている場合にのみ適用されます。CSSルールに従って、直接ターゲットに設定された要素は、要素がその祖先から継承するルールよりも常に優先されます。

私はhttps://specifishity.comで0-0-0の説明が好きです：

!important指令の画像をかなり説明します！ただし、インラインstyle属性をオーバーライドする唯一の方法である場合もあります。したがって、両方を回避しようとすることがベストプラクティスです。

— AMS777
ソース

1

優れた。ちょうど私が探していたもの。このグラフィックは素晴らしい笑です。

— saran3h

7

まず、@extendディレクティブに基づいて、純粋なCSSではなく、SASS os Stylusなどのプリプロセッサを使用しているようです。

ここで、CSSで「優先順位」について説明する場合、一般的なルールが関係しています。他のルールの後に（トップダウン方式で）適用されるルールが適用されます。あなたの場合、.smallbox後に指定するだけで.smallbox-paysummaryは、あなたがあなたのルールの優先順位を変更することができるだろう。

ただし、もう少し詳しく知りたい場合は、CSSカスケードW3C仕様をお勧めします。ルールの優先順位は以下に基づいていることがわかります。

現在のメディアタイプ。
重要性;
原点;
セレクターの特異性、そして最後によく知られているルール：
後者はどちらが指定されています。

— レナート
ソース

5

ASはW3の状態です： W3カスケードCSS

異なるスタイルシートが適用される順序は次のとおりです（W3カスケードセクションからの引用）。

ユーザーエージェント宣言
ユーザーの通常の宣言
著者の通常の宣言
重要な宣言を作成する
ユーザーの重要な宣言

これについての詳細は、参照されているW3ドキュメントをご覧ください。

— 無料開発者
ソース

4

クラスがhtml要素に表示される順序は重要ではありません。重要なのは、ブロックがスタイルシートに表示される順序です。

あなたの場合、10pxの優先順位の.smallbox-paysummary後に定義されています.smallbox。

— LifeQuery
ソース

4

Element, Pseudo Element: d = 1 – (0,0,0,1)
Class, Pseudo class, Attribute: c = 1 – (0,0,1,0)
Id: b = 1 – (0,1,0,0)
Inline Style: a = 1 – (1,0,0,0)

インラインcss（htmlスタイル属性）は、スタイルタグとcssファイルのcssルールをオーバーライドします

より具体的なセレクターは、それほど具体的でないセレクターよりも優先されます。

コードの後半に現れるルールは、両方が同じ特異性を持つ場合、以前のルールをオーバーライドします。

— ラッキーチャトゥルヴェディ
ソース

適切な説明を次に示し

— css

1

@Mahiこの間、提案された編集を振っていましたが、将来的には、十分な長さにするために編集にゴミを追加しないでください。最初の編集の損傷を「元に戻す」2番目の編集を行うことは非常に悪い習慣であり、レビュアーにとって非常に直感的でなく、必要以上の作業を作成します。代わりに、改善できる可能性のある他のもの（スペルや文法など）を探してください。

— Siguza

0

また、重要なことは、同じ優先度のHTML要素に2つのスタイルがある場合、ブラウザーはDOMに最後に書き込まれたスタイルを優先するということです。

<html>
<head>
<style>.container-ext { width: 100%; }</style>
<style>.container { width: 50px; }</style>
</head>
<body>
<div class="container container-ext">Hello World</div>
</body>

... divの幅は50pxになります

— P.エイブリー
ソース

これは実際には優先順位ではありません。これはカスケードスタイルシートのカスケード部分です。

— TylerH