css - !important と CSS 固有性の関係

Question

CSS specificity specificationを見ると、!importantルールの「ポイント」の数について言及されていません。

いつ別のものをオーバーライドしますか? 一方が他方の後に宣言された場合はどうなりますか? より重要であると宣言されているルールはどれですか? なんかパターンある？

見た目からすると、!importantそもそもより具体的なポイントがあるものに適用されます。しかし、膨大な数の ID をクラスで積み上げて深くネストして宣言するとどうなるでしょうか。でマークされた、あまり指定されていない別のルールで設定されたルールを上書きします!importantか?

score 40 · Accepted Answer

CSS の特異性は、関連する宣言ではなく、セレクターのみに関係します。!important宣言に適用されるため、それだけでは具体性に影響を与えません。

ただし、複数の同じプロパティ宣言が適用される特定の要素のスタイルの全体的な計算であるカスケード!importantに影響します。または、クリストファー・アルトマンが簡潔に説明しているように：

!importantはスペードカードです。それはすべての特異点に勝ります。

!importantそれだけではありません。カスケード全体に影響を与えるため、同じ要素に一致する宣言を含むルールを持つ複数のセレクターがある場合!important、セレクターの特異性が引き続き適用されます。繰り返しますが、これは単純に、同じ要素に複数のルールが適用されているためです。

つまり、同じスタイルシート (同じユーザースタイルシート、同じ内部作成者スタイルシート、または同じ外部作成者スタイルシートなど) 内の等しくないセレクターを持つ 2 つのルールの場合、最も具体的なセレクターを持つルールが適用されます。スタイルが存在する場合は!important、最も具体的なセレクターを持つルール内のスタイルが優先されます。最後に、重要なものかそうでないものしか持つことができないため、カスケードに影響を与えることができるのはこれだけです。

のさまざまな用途!importantとその適用方法を以下に示します。

宣言は常に宣言の!importantないものをオーバーライドします (IE6 以前を除く):
```
/* In a <style> element */
#id {
    color: red !important;
    color: blue;
}
```
同じレベルの特異性を持つルールに複数の!important宣言がある場合、後で宣言されたものが優先されます。
```
/* In a <style> element */
#id {
    color: red !important;
    color: blue !important;
}
```

同じルールと同じプロパティを 2 つの異なる場所で!important宣言する場合、両方の宣言が重要な場合はカスケード順序に従います。

/* In an externally-linked stylesheet */
#id {
    color: red !important;
}

/* In a <style> element appearing after the external stylesheet */
#id {
    color: blue !important; /* This one wins */
}

次の HTML の場合:
```
<span id="id" class="class">Text</span>
```
2 つの異なるルールと 1 つのルールがある場合!important:
```
#id {
    color: red;
}

.class {
    color: blue !important;
}
```
それ!importantは常に勝ちます。

ただし、複数ある場合!important:
```
#id {
    color: red !important;
}

.class {
    color: blue !important;
}
```
#idルールにはより具体的なセレクターがあるため、どちらかが優先されます。

score 8 · Accepted Answer

それについて私が考える方法は次のとおりです。

!importantはスペードカードです。それはすべての特異点に勝ります。特定の質問に対して、!important膨大なID /クラスをオーバーライドします。
!importantカスケードをリセットします。したがって、 a !importantbelow anotherを使用する!importantと、2 番目のインスタンスが規則になります。

より技術的な答えがありますが、それが私が考える方法です!important。

もう1つ注意してください。使用している場合は!important、一歩下がって、何か間違ったことをしていないかどうかを確認する必要があります。!importantCSS のカスケードに反対していることを意味します。!importantまれに使用する必要があります。

css - !important と CSS 固有性の関係

2 に答える 2

Related

Reference