CSSで強制的に優先度を上げる方法-フロントエンドQ&A-php.cn

CSSで強制的に優先度を上げる方法

青灯夜游

リリース： 2022-09-06 17:49:50

オリジナル

4581 人が閲覧しました

CSS では、「! important」ステートメントを設定することで優先度を強制的に高めることができます。このステートメントは、指定された CSS スタイルルールの適用優先度を高めるために使用され、CSS の最後に追加されます。スタイル値を指定します。スタイルにはより重みがあり、構文は「selector {property:value! important;}」です。「! important」ルールを使用すると、スタイルシートの自然なカスケード効果が損なわれ、コードの保守が困難になります。そのため、絶対に必要な場合を除き、! important ルールの使用はできる限り避け、特別な状況でのみ使用する必要があります。。

CSSで強制的に優先度を上げる方法

このチュートリアルの動作環境: Windows 7 システム、CSS3&HTML5 バージョン、Dell G3 コンピューター。

CSS では、「! important」ステートメントを設定することで優先度を強制的に高めることができます。

#!重要な宣言

#!重要は、指定された CSS スタイルルールの適用優先度を高めるために使用されます。最後に CSS 値を追加して重みを付けます。

选择器{属性:值 !important;}

ログイン後にコピー

注:

属性: 値 !重要 属性値はスペースで区切ることができます。

CSS では、スタイルルールはカスケード方式で要素に適用されます。次のリストの重みが大きいほど、重みは小さくなります。

● ブラウザスタイル: Web ブラウザによって宣言されるデフォルトのスタイルです。

# ユーザー宣言スタイル: ユーザーがブラウザーオプションを使用して設定したカスタムスタイル、または開発者デバッグツールを通じて変更されたカスタムスタイル。

# 開発中に宣言されたスタイル: Web サイト開発者によって CSS スタイルシートで宣言されたスタイルです。

# !重要なルールを含む開発者が宣言したスタイル。

# !重要なルールを含むユーザースタイル。

#! important は、要素の style 属性に CSS 宣言を直接設定するよりも、スタイルの重みを増やす方法を開発者に提供します。これは通常、CSS が JavaScript 設定をオーバーライドする場合に使用されます。

例:

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>测试!Important</title>
</head>
<style type="text/css">
    #Box div
    {
        color: red;
    }
    .important_false
    {
        color: blue;
    }
    .important_true
    {
        color: blue !important;
    }
</style>
<body>
    <div id="Box">
        <div class="important_false">
            这一行末使用important</div>
        <div class="important_true">
            这一行使用了important</div>
    </div>
</body>
</html>

ログイン後にコピー

レンダリング:

CSSで強制的に優先度を上げる方法 CSS コードの最初の行は、ボックス内のすべての div のフォントの色を赤に設定します。 , 2 行目と 3 行目は両方ともクラスを使用して、独自の div のフォントの色を青に再定義しています。

まとめ:

1行目のフォントの色は赤ですが、CSSのスタイル設定ではクラスよりもidの優先度が高いことが証明でき、この行のテキストは赤のままです。

2 行目のフォントの色は青です。重要度が最も高いことが証明され、CSS スタイルの important_true が有効になり、この行のテキストが青に変わります。

#!重要なルールをいつ使用するか?

絶対に必要な場合を除き、!重要なルールを使用しないでください。!重要なルールを使用すると、スタイルシートの自然なカスケード効果が損なわれ、コードの保守が困難になります。ただし、使用しなければならない状況もあります。 important: 1. Web サイトをテストおよびデバッグする場合、! important ルールは非常に役立ちます。

コードに CSS の問題があり、特定のスタイルが適用されていることを確認したい場合は、! important ルールを使用して、より良い方法が見つかるまでサイトの問題を一時的に修正できます (これは可能性があります)。しばらく時間がかかる）。

2. 出力スタイルシート

!重要なルールを出力スタイルシートにも使用して、他のものによって上書きされることなくスタイルが適用されるようにすることもできます。

結論

! important の使用はパフォーマンスに悪影響を及ぼしません。しかし、保守性の観点から、絶対に必要な場合を除き、 ! important の使用はできる限り避けるべきです。ルールとしては、特別な状況でのみ使用する必要があります。

以上がこの記事の全内容です、皆様の学習のお役に立てれば幸いです。さらにエキサイティングなコンテンツについては、PHP 中国語 Web サイトの関連チュートリアルのコラムに注目してください。！！

特記事項:

!重要は IE6 では認識されません。例:

.testClass{ 
    color:blue !important; 
    color:red;
}

ログイン後にコピー

この書き方はIE6では認識できません。最終的には.testCalssが赤字で表示されますが、IE6でも認識できるように書き方を変更することも可能です!重要

.testClass{ 
    color:blue !important; 
} 
.testClass{ 
    color:red; 
}

ログイン後にコピー

(学習動画共有: Web フロント-開発を終了)

以上がCSSで強制的に優先度を上げる方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。