web-dev-qa-db-ja.com

別のCSSクラスを使用してCSSクラスのプロパティをオーバーライドする方法

私はCSS3がかなり初めてなので、次のことができるようにしたいと思います。

クラスを要素に追加すると、この特定の要素で使用されている別のクラスのプロパティがオーバーライドされます。

私が持っているとしましょう

<a class="left carousel-control" href="#carousel" data-slide="prev">

私は、クラスleftのデフォルトの背景を上書きしてしまうbakground-noneというクラスを追加できるようにしたいと思います。

ありがとうございます。

cssclassoverride
69
user3075049

プロパティをオーバーライドする方法はいくつかあります。あなたが持っていると仮定

.left { background: blue }

例えば次のいずれかで上書きされます。

a.background-none { background: none; }
body .background-none { background: none; }
.background-none { background: none !important; }

最初の2つはセレクターの特定性によって「勝ち」ます。 3番目のものは鈍い楽器である!importantによって勝ちます。

スタイルシートを整理して次のようにすることもできます。ルール

.background-none { background: none; }

単純に順番で勝ちます。つまり、の後にであること以外は同じくらい強力な規則です。しかしこれは制限を課し、スタイルシートの再編成には注意を払う必要があります。

これらはすべて、重大な、しかし広く誤解されている概念である CSS Cascade の例です。これはスタイルシートルール間の衝突を解決するための正確なルールを定義します。

P.S私はleftとbackground-noneを質問で使われていたので使いました。これらは、notを使用する必要があるクラス名の例です。これらは特定のレンダリングを反映するものであり、構造的または意味的な役割を示すものではないためです。

71
Jukka K. Korpela

単に !important を使用すると、上書きするのに役立ちます。

background:none !important;

これを見てみましょう： いつ使うのが重要か - 正しい選択

49
Pranav C Balan

importantキーワードの代わりに、セレクタをより具体的にすることができます。次に例を示します。

.left.background-none { background:none; }

（注：クラス名の間にスペースは入れないでください）。

この場合、.leftと.background-noneの両方がclass属性にリストされているときに規則が適用されます（順序や近接度に関係なく）。

23
Marc Audet

あなたはあなたのスタイルの特異度を増やすことによって上書きするべきです。特異度を上げるにはさまざまな方法があります。特定性に影響する!importantの使用はスタイルシートの自然なカスケードを壊すので悪い習慣です。

css-tricks.com から抜粋した次の図は、ポイント構造に基づいて、要素に適切な具体性を生み出すのに役立ちます。どちらの特異性がより高いポイントを持っていても、勝つでしょう。ゲームみたいですね。

enter image description here

サンプル計算はこちら css-tricks.com で確認してください。これは概念を非常によく理解するのを助け、それは2分だけかかる。

もしあなたが自分自身で異なる特異性を作り出したり比較したりしたいのなら、このSpecificity Calculatorを試してみてください。 https://specificity.keegan.st/ またはあなただけの伝統的な紙/鉛筆を使うことができます。

さらに読みたい場合は、 MDN Web Docs を試してください。

!importantを使用しないためのすべての最善策。

15
Undefined

他のクラスの後にbakground-noneクラスをリストすると、そのプロパティはすでに設定されているものをオーバーライドします。ここで!importantを使う必要はありません。

例えば：

.red { background-color: red; }
.background-none { background: none; }

そして

<a class="red background-none" href="#carousel">...</a>

リンクの背景は赤になりません。これは、それほど特異的ではない、または同等に特定的なセレクターを持つプロパティーのみをオーバーライドすることに注意してください。

8
Ruud

LIFOは、ブラウザがCSSプロパティを解析する方法です。Sassを使用している場合は、次のように呼ばれる変数を宣言します。

"$ header-background：red;"

赤や青などの値を直接代入する代わりに使用してください。上書きしたい場合は、単に値をに再割り当てします。

"$ header-background：blue"

それから

background-color：$ header-background;

スムーズに上書きされるはずです。 「！important」を使用することは必ずしも正しい選択ではありません。単なるホットフィックスです。

1
Ignatius Andrew