1

このソースによると、同じ要素に競合する CSS スタイルがある場合、埋め込まれたスタイルは外部スタイルをオーバーライドしますが、それは私が観察したものではありません。

私は次のHTML（簡略化）を持っています：

<html>
<head>
  <link rel="stylesheet" type="text/css" href="foundation.min.css" />
  <style type="text/css">
  .dialog_error_container
  {
    display: none;
  }
  </style>
</head>
<body>
  <div class="dialog_error_container alert-box alert">...</div>
</body>
</html>

.dialog_error_container定義されたルールが優先されることを期待していましdiv.alert-boxたが、反対の結果が得られました (下の画像を参照)。

ここに画像の説明を入力

埋め込みスタイルが外部スタイルをオーバーライドしない理由を説明してください。

4

4 に答える 4

4

外部 CSS と埋め込み CSS に違いはありません。どちらもまったく同じように扱われます。オーバーライドしない理由は、div.alert-boxが より具体的だからです.dialog_error_container。特異性の内訳:

  • div.alert-box1 つのクラスと 1 つの要素があるため、0,0,1,1 の特異性を取得します。

  • .dialog_error_containerクラスが 1 つあるため、特異度は 0,0,1,0 になります。

これら 2 つの特異性が同じである場合は、最後に定義された方が優先されます。

一般的には、CSS セレクターの特異性を可能な限り低くすることが最善であることに注意してください。これにより、オーバーライドが容易になります。

于 2013-01-05T02:40:01.463 に答える
3

そのリンクはあなたを迷わせています。埋め込みスタイルと外部スタイルには同じレベルの特異性があり、それはセレクターに帰着します。その場合div.alert-box、より具体的です.dialog_error_container

あなたが持っているものであなたが求めている動作を作成する最も簡単な方法は、埋め込みセレクターを次のように変更することですdiv.dialog_error_container

于 2013-01-05T02:40:07.990 に答える
2

引用元に誤りがあります。正式な仕様を確認してください: CSS 2.1、節 6.4.1 Cascading order。「オリジン」に関しては、外部スタイル シートと組み込みスタイル シートの両方が「作成者スタイル シート」です。したがって、次の基準は具体性であり、 (クラス セレクターのみ) は(クラス セレクターと組み合わせた要素タイプ セレクター.dialog_error_container) よりも具体的ではありません。div.alert-box

代わりに使用div.dialog_error_containerすると、特異性が等しくなります。次に、「順序による並べ替え」が介入し、埋め込まれたスタイル シートが優先されます。これは、埋め込まれているという理由ではなく、後で行われたためです (styleこの場合のlink要素は、外部スタイル シートを参照する要素の後に表示されます)。

したがって、(スタイル シートの将来の再編成に対して) 具体性を高くする方が安全body div.dialog_error_containerです!important。

于 2013-01-05T09:10:58.697 に答える
1

外部 CSS は、より具体的であるため、おそらく埋め込みスタイルをオーバーライドします。要素とクラスの両方のルールがありますがdiv.alert-box、埋め込みスタイルには.dialog_error_containerクラスがあります。

于 2013-01-05T02:40:48.513 に答える