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

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

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

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

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

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

ありがとう！

プロパティを上書きする方法はいくつかあります。あなたが持っていると仮定

.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カスケードの重要な例ですが、広く誤解されている概念です。スタイルシートのルール間の競合を解決するための正確なルールを定義します。

私が使用したPS left、およびbackground-none質問で使用したとおり。これらは特定のレンダリングを反映しており、構造的または意味的な役割を反映していないため、使用してはならないクラス名の例です。

使用!importantするだけで上書きできます

background:none !important;

それは悪い習慣と言われているが、!importantユーティリティクラスのために役立つことができ、あなただけの責任それを使用する必要があり、この点を確認してください。重要な使用時の正しい選択であります

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

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

（注：クラス名の間にスペースは入れません）。

この場合、ルールが適用される場合の両方.leftと.background-none（かかわらず、順序または近接の）クラス属性に記載されています。

スタイリングの詳細度を上げることでオーバーライドする必要があります。特異性を高める方法はいくつかあります。!important特異性に影響する使用は悪い習慣です、スタイルシートの自然なカスケードを壊すのでです。

css-tricks.comから取られた次の図は、ポイント構造に基づいて要素の正しい特異性を作成するのに役立ちます。どちらの特定性がより高いポイントを持っているとしても、勝つでしょう。ゲームのように聞こえますか？

ここでcss-tricks.comの計算例をチェックアウトしてください。これは、概念を非常によく理解するのに役立ち、所要時間はわずか2分です。

自分でさまざまな特異度を作成または比較したい場合は、この特異度計算ツールを試してください：https : //specificity.keegan.st/または、従来の紙/鉛筆を使用できます。

詳細については、MDN Web Docsをお試しください。

使用しないのに最適です!important。

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

例えば：

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

そして

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

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

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

「$ header-background：red;」

赤や青などの値を直接割り当てる代わりに使用します。オーバーライドしたい場合は、値を

「$ header-background：blue」

その後

background-color：$ header-background;

スムーズにオーバーライドする必要があります。「！important」を使用することが常に正しい選択であるとは限りません。