css - 1 つの要素で 2 つのクラスを使用する方法や、この動作をエミュレートする方法はありますか?

Question

私はする必要があります：

  <p id="un_but" class="blue_but" class="radius_right">SignUp</p>

しかし、これは機能しません。

明らかに、クラスのプロパティを組み合わせることができましたが、おそらく別の方法があるかどうか疑問に思っていました

score 5 · Accepted Answer

  <p id="un_but" class="blue_but radius_right" >SignUp</p>

dom element( p) は 1 つの attribute( class) しか持つことができませんが、スペースで区切られた複数の値を持ちます

score 1 · Accepted Answer

CSS のあまり知られていないトリックの 1 つは、要素を 1 つのクラスだけに制限する必要がないという事実です。要素に複数のクラスを設定する必要がある場合は、属性内でそれらをスペースで区切って追加するだけです。例えば：

<p class="pullquote btmmargin left">...</p>

これにより、その段落タグに次の 3 つのクラスが設定されます。

pullquote btmmargin left CSS でこれらをジェネリッククラスとして割り当てます。

.pullquote { ... }
 .btmmargin { ... }
 p.left { ... }

クラスを特定の要素に設定した場合でも、クラスのリストの一部として使用できますが、CSS で指定された要素にのみ影響することに注意してください。

important キーワードを使用して、さまざまなクラスに優先順位を設定できます。例えば：

.pullquote { width :15 px !important }
     .btmmargin { width:20px  }
     p.left { ... }

上記の例では、20px 幅属性がより優先されます。

2 に答える 2