css - 1つの要素と特異性で複数のクラスを使用する

Question

のような1つの要素で複数のクラスを使用する場合class="foo bar"、それらのクラスは次のように設定されます。

.foo {
    margin-right: 10px;
}


.bar {
    margin-right: 0px;
}

どのクラスに特異性がありますか？マージンは10pxまたは0pxになりますか？

Answer 1

CSS内の優先順位に基づいて機能します。したがって、最後に発生するアイテムは、以前のスタイルを上書きします。

ケース1

.foo  { background : red; }
.bar  { background : blue; }

class = 'foo bar'この場合は青になります。

ケース2

.bar  { background : blue; }
.foo  { background : red; } 

class = 'foo bar'この場合は赤になります。

実例

Answer 2

また、両方のクラスしかない要素をターゲットにする場合は、次の構文を使用できます。

<ul>
  <li class="foo first">Something</li>
  <li class="foo">Somthing else</li>
  <li class="foo">Something more</li>
</ul>

.foo {
  color: red;
}
.foo.first {
  color: blue
}

Answer 3

単一のクラス名には同じ重みがあります。このようなシナリオでは、最初にリストされているルールが2番目に上書きされるため、要素は次のようになります。margin-right: 0px;

視覚化が簡単なため、マージンの代わりに使用する簡単な例を次に示します。colorで指定された値barはブラウザによって選択されます。

Answer 4

さらに、より「特定の」クラスは、より一般的なクラスをオーバーライドします。

HTML：

<div class="foo">
    <div class="bar">Hello World!</div>
</div>

次のCSSを使用します。

.foo .bar { margin-left:25px }
.bar { margin-left:0px }

内側のdivの左側に25pxのマージンがあることに注意してください。

また、値を指定した後、「！important」引数を読んでください。

.bar { margin-left:0px!important }

チェックアウト