html - 複数のクラスを指定すると、どれが使用されますか？

Question

2つのクラスが割り当てられている要素があり、2つのクラスのCSSが何かについて意見が一致しない場合、どちらが使用されますか？そして、どちらを使用するかを制御する方法はありますか？

例えば：

<p class='red small'>Some Text Here</p>

CSSで：

.red { color:#ff0000; font-size:200%; }
.small { font-size:50%; }

明らかに私のテキストは赤くなりますが、どのサイズになりますか？そして、それを制御するクロスブラウザの方法はありますか？

score 4 · Accepted Answer

割り当てたすべてのクラスが使用されます。

プロパティ値が競合する場合は、最も具体的なものが優先されます。具体性が同じ場合は、最後に来るものが優先されます。

つまり、このクラスを使用していた場合と同じです。

.redAndSmall {
    color:#ff0000;
    font-size:50%;
}

ほとんどの場合、クラスの意味が異なるため、優れた設計では問題は発生しません。

score 1 · Accepted Answer

50%、それはあなたのcssの順序に依存するからです。属性内の順序classは無視されます。

score 0 · Accepted Answer

cssで使用されるカスケードがあります。最初に、インラインスタイリングが見つからない場合は適用され、次にスタイリングがヘッドから適用されます。スタイリングが見つからない場合は外部ファイルから、外部ファイルがない場合はブラウザのデフォルトが使用されます。スタイリングプロパティ。

3 に答える 3