3

とタグ付けされたいくつかの回答!importantは、特異性を支持しての使用を思いとどまらせます。なんで？

4

1 に答える 1

3

CSSルールの影響を予測、制御、およびリバースエンジニアリングするために使用できる実際の数学があります。使用することによって!importantあなたはそれを破っています。たとえば、このJSフィドルを見てください。これは使用していません：http !important：//jsfiddle.net/hXPk7/

FirebugまたはChrome開発ツールを使用して「Richard」と表示されているtitle要素を検査する場合、次のルールが次の順序で表示されます。

/**************************/
/* /hXPk7/show/ (line 20) */
/**************************/
#myExample #title .name {
    color: yellow;
}

/********************************************************/
/* /hXPk7/show/ (line 14) - Inherited fromdiv#myExample */
/********************************************************/
#myExample {
    color: blue;
}

これはCSSスタイルシートに表示される順序ではないことに注意してください。代わりに、特定性の高い順に並べられています。優先されるものが最初にリストされ、他のもの（ルールがより具体的なルールによってオーバーライドされる）には、おそらくプロパティに取り消し線が引かれています。これは、特異性により、要素がCSSプロパティを取得している場所を簡単に追跡（デバッグ？）できることを示しています。

ここで、このJSフィドルと比較してください。これは事実上同じですが、次を使用する単一の新しいルールがあります：http !important: //jsfiddle.net/hXPk7/1/

FirebugまたはChrome開発ツールを使用して同じ要素を検査すると、次のようなものが表示されます。

/**************************/
/* /hXPk7/1/show/ (line 20) */
/**************************/
#myExample #title .name {
    color: yellow;
}

/**************************/
/* /hXPk7/1/show/ (line 26) */
/**************************/
span {
    color: black !important;
}

/********************************************************/
/* /hXPk7/1/show/ (line 14) - Inherited fromdiv#myExample */
/********************************************************/
#myExample {
    color: blue;
}

繰り返しになりますが、ルールはその特異性に従って順序付けられていますが、今回は、最初にリストされている最も具体的なルールがのを指定しているのに対し、ブラウザーは代わりにテキストを黒としてレンダリングすることに注意してcolorくださいyellow。これは、!important宣言が特定性の通常の動作を破り、追跡が困難な方法で優先されるためです。数百のルールが存在する可能性のある、より現実的なWebサイトを想像してみてください。このサイトを制御しているサイトは、color見つけたり変更したりするのが明らかではありません。

!importantさて、これは開発者ツールの問題かもしれませんが、通常は予測しやすい優先順位のシステムを採用し、それをより困難にしているという事実を反映していると思います。たぶんそれを使う時があるかもしれません、しかしそれはあなたがCSSを書くときあなたが到達する最初のツールであるべきではありません。

于 2013-03-23T01:32:23.650 に答える