特定の要素に対して2つの他のCSSクラスが存在する場合は、CSSクラスをオーバーライドします。他の2つのクラスがある場合は、CSSクラスをオーバーライドします。
例：
<img class="class1 class2" />
私はこのケースでclass3を上書きしたいです。
私の現在の実装は以下のようなものです。
.class1.class2 { .class3 {padding-left: 1px} }
しかし、このアプローチはうまくいかないようです。
ちょうど
.class1.class2.class3 {
/* these definitions are more specific and don't need !important; */
}
が、これは上class3を置くためにあなたを必要と覚えておいてください行きます同様の要素：
<element class="class1 class2 class3"></element>
あなたがclass3を追加したい唯一の理由は、両方クラスclass1 class2が存在する場合に適用されるべきスタイルを指定する場合は、あなたもちょうど行く、class3必要はありません
.class1.class2 {
/* these definitions are more specific than those for .class1 or .class2
and don't need !important;
These rules apply to any element that has both class1 and class2 */
}
は魅力的です！ありがとう！ –
これを試してみてください：
<html>
<head>
<style>
.class1{background:green;}
.class2{background:blue;}
.class1.class2{background:red}
</style>
</head>
<body>
<p class="class1"> This is a paragraph. </p>
<p class="class2"> This is a paragraph. </p>
<p class="class1 class2"> This is a paragraph. </p>
</body>
</html>
結果：あなたが行っているようにあなたが別の内のセレクタを埋め込むことはできません
、しかし、あなたはときに使用すべきかを指定することができます両方のクラスが存在します。例えば
HTML
<p class="class1">A</p>
<p class="class2">B</p>
<p class="class1 class2">C</p>
CSS
.class1 {border:1px solid red}
.class2 {border:1px solid green}
.class1.class2 {border:1px solid blue}
イメージタグを表示しているので、class3がこのタグの内側にネストされていないと仮定します。 image-Tagは、ネストされた要素を持つべきではありません。 あなたの定義では、class3は別のクラスの中の要素になります。たとえば ：
<p class="class1 class2"><span class="3">some text</span</p>
あなたのケースでは、同じレベル内のクラスを定義する必要があります。
.class1.class2 {
&.class3 {
padding-left: 1px
}
}
amperはclass3を同じレベルで定義します。
この定義は.class1.class2よりも指定されているため、これらのスタイルをオーバーライドする必要があります。
これは有効な方法ではありません。 'class3'のHTMLは何ですか？ –
'![]()
' class3のためにhtmlでこれを書いてください。スタイルにとって重要なのはclass1とclass2の両方をオーバーライドします。 –
cna327
@Srinivas特異性は問題ありません。初心者には何か重要なことは言わないでください。 –