CSSで重みを設定する方法-CSSチュートリアル-php.cn

CSSで重みを設定する方法

青灯夜游

リリース： 2023-01-07 11:41:42

オリジナル

10805 人が閲覧しました

CSS では、「! important」ステートメントを使用して重みを設定できます。これにより、開発者はスタイルの重みを増やす方法が提供されます。構文形式は「property:property value ! important;」です。。「! important」ステートメントは、このスタイルの属性と属性値を含むスタイル全体の宣言です。

CSSで重みを設定する方法

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

CSS の重み

は、スタイルの優先度を指します。要素に作用するスタイルが 2 つ以上ある場合、その要素に作用するスタイルが優先されます。重みが大きいほど、スタイルは要素に作用します。重みが同じ場合、後で書かれたスタイルが前に書かれたスタイルをオーバーライドします。

重みのレベル

# (1) !重要、スタイル属性値の後に追加され、重み値は 10000

(2) インラインスタイル、例: 、重み値は 1000

(3) ID セレクター、例: #content、重み値は 100

(4) クラス、擬似クラスと属性の選択ラベルセレクターと疑似要素セレクターの重み値 (content、:hover など) は 10

(5) です。ラベルセレクターと疑似要素セレクターの重み値は、次のようになります。 : div, p, :before, is 1

(6 ) ユニバーサルセレクター (*)、子セレクター (>)、隣接セレクター ()、兄弟セレクター (~)、重み値は 0

CSSで重みを設定するにはどうすればよいですか?

CSS では、「! important」ステートメントを使用して重みを設定できます。これにより、開発者はスタイルの重みを増やすことができます。

css の重み値 (重複) の例

CSS には多数のセレクターがあり、複数のセレクターで機能します。同じ要素が使用されている場合の効果は何ですか? コード

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
      p{
        color:red;
        font-size: 10px;
      }
      #wrap{
        color: deeppink;
        font-size: 30px;
      }
      .box{
        color:yellow;
        font-size: 50px;
      }
    </style>
  </head>
  <body>
    <p id="wrap">
       猜猜我是什么颜色
    </p>
  </body>
</html>

ログイン後にコピー

を実行すると、結果は次のようになります
概要: この効果は、ブラウザが重み値に基づいて使用する CSS スタイルを決定するために発生します。重み値が大きいほど優先順位が高くなり、CSS スタイルと ID セレクターの重み値が表示されます100>クラスセレクター 10>タグセレクター 1 の場合、最終結果は ID セレクターによって設定されたスタイルになります。
リスト 2 コード

!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
      *{
          color: cyan;
      }
      div {
          color: yellow;
      }
    </style>
  </head>
  <body>
    <div>
        <p id="wrap">
        猜猜我是什么颜色
        </p>
    </div>
  </body>
</html>

ログイン後にコピー

実行結果

概要: 継承された要素には重み値がないため、最終結果はユニバーサルセレクターによって設定されます。スタイル
##例 3 コード

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
      p{
          color: yellow;
      }
      *{
          color: cyan;
      }
    </style>
  </head>
  <body>
    <div>
        <p id="wrap">
        猜猜我是什么颜色
        </p>
    </div>
  </body>
</html>

ログイン後にコピー

概要: タグセレクターの重み値は 1 ですが、それでもユニバーサルセレクターよりも大きいため、最終結果はタグセレクターによって設定されたスタイルになります。
#例 4 コード

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
      div p{
          color: yellow;
      }
      div>p{
          color: cyan;
      }
      p{
          color: red;
      }
    </style>
  </head>
  <body>
    <div>
        <p id="wrap">
        猜猜我是什么颜色
        </p>
    </div>
  </body>
</html>

ログイン後にコピー

#実行結果

# #

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
      div>p{
          color: cyan;
      }
      div p{
          color: yellow;
      }
      p{
          color: red;
      }
    </style>
  </head>
  <body>
    <div>
        <p id="wrap">
        猜猜我是什么颜色
        </p>
    </div>
  </body>
</html>

ログイン後にコピー

実行結果

!重要重み値の増加例

Web ページのコードを作成するとき、特定のスタイルに最大の重み値を設定する必要がある特殊な状況がいくつかあります。どうすればよいでしょうか?たとえば、インラインスタイルのウェイト値が 1000 で比較的大きいことがわかっている場合、! important を使用してそれを解決できます。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>!important的使用</title>
        <style type="text/css">
            div{
                color:green !important;
            }
        </style>
    </head>
    <body>
        <div id="box" style="color:red;">
            <span>猜猜我是什么颜色</span>
        </div>
    </body>
</html>

ログイン後にコピー

実行結果