web-dev-qa-db-ja.com

複数のCSSクラス：定義された順序に基づいたプロパティの重複

要素に複数のクラスが定義されている場合、カスケード順序を決定するルールがCSSにありますか？ （class="one two" vs class="two one"）

今のところ、そのような効果はないようです。

例：Firefoxでは両方のdivがオレンジ色です

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<html>
  <head>
    <style>
      .one { border: 6px dashed green }
      .two { border: 6px dashed orange }
    </style>
  </head>

  <body>

  <div class="one two">
    hello world
  </div>

  <div class="two one">
    hello world
  </div>
web-standardscss
52
太極者無極而生

スタイルシートで最後に宣言されているものに依存します。例えば、

.one { border: 6px dashed green }
.two { border: 6px dashed orange }

対

.two { border: 6px dashed green }
.one { border: 6px dashed orange }
72
edl

クラスdefinedCSSの最後は、これらの場合に勝るものです。要素の順序は重要ではありません。これは私が知っているすべてのブラウザーで一貫しているため、関連する仕様ビットを試してみます。

entireクラスは勝ちません。.oneには.twoもちろん、これらの両方のプロパティが表示されませんでした<div>要素。

21
Nick Craver

他の回答で指摘したように、クラス属性で宣言された順序は効果がありません-優先順位はCSSファイルでの宣言の順序になります。

ただし、クラス属性の優先順位を「偽造」できるようなものを本当にモックアップしたい場合は、次のことを試すことができます。

   .one-first { border: 6px dashed green }
      .two-first { border: 6px dashed orange }

   .one { border: 6px dashed green }
      .two { border: 6px dashed orange }

その後

   <div class="one-first two"/>

そして

   <div class="two-first one"/>

最後に勝ったものから優先順位を決定します（優先順位が最後になったCSSプロパティと同様に）。

4
mdma

要素スタイルシートを定義するために複数のクラスを使用する場合、!importantスタイルシートの「カスケード」をオーバーライドします。

.one { border: 6px dashed green !important } 
.two { border: 6px dashed orange }

Divが緑色になります。

3
CARLOS LOTH

クラス属性の順序は少し重要ではありません。それはいくつかのことに依存します。あなたの場合、cssが書かれている順番です。

両方のスタイルの特異性は同じであるため、.twoスタイルは.oneのスタイルをオーバーライドします。スタイルタグの下位にあるためです。

2
Ben Rowe

そのようなルールが適用されないことは明らかだと思います。ルール .oneは、ルールと同じ特異性を持っています.twoので、CSS標準に従って.twoブロックは、.one なぜなら .twoブロックは後で表示されます。 class属性内の単語の順序はどこにも参照されません。

2
hobbs

オーバーライドは、クラスが宣言された順序で発生します。 .twoが常に勝ちます

1
Sonic Soul

疑わしい場合は、FireBugでページを表示してください。オーバーライドされたクラスを取り消し、ページ内で適用される順序を表示します。

また、インラインスタイルは、外部スタイルシートで宣言されたスタイルをオーバーライドすることに注意してください。カスケードチェーンの適用性を壊したい場合は、！important宣言を使用できます

p {margin: 10px 5px 0 10px !important}

これにより、位置に関係なく！important宣言が他の宣言をオーバーライドします。一部の人はそれを悪い習慣と見なしていますが、賢明に使用すれば便利な場合があります。

1
Laramie