CSSは別のクラス名を使用せずにあるクラスの1つの要素を変更します

Question

これを行う方法があるかどうか疑問に思っていました。

特定のCSSクラスの1つのプロパティだけを変更して、もう一度コピーして別のクラス名を割り当てる必要はありません。私はこのクラスを持っている場合

ので、

<div class="example">I am a red font with properties </div> 

それは私が私の他のdivのクラス例を使用したい、今すぐCSSに

.example { 
font-size:2em; 
font-color:red; 
padding:2%; 
display:inline; 
//other several properties } 

をだが、私はちょうどフォントが緑色になりたいです。私は再び例2は、例と同じになりますが、唯一のフォントの色が

それのCSS

を変更します

<div class="example2">I am a green font with properties </div> 

、同じプロパティをコピーして、ちょうど別のクラス名を割り当てたくありません

.example2 { 
font-size:2em; 
font-color:green; 
padding:2%; 
display:inline; 
//other several properties same as example class 

CSSプロパティをコピーして名前を変更せずにインポートする方法はありますか？何かのように

<div class="example" onlychange="font-color:green"> 
      I am a green font with properties </div> 

唯一の変更属性のような何かを達成するための技術はありますか？

Answer 1

ここには2つの方法があります。最初に別のクラスを追加し、その1つのプロパティだけを変更します.2つ目のクラスプロパティは、その両方に存在する場合、前のクラスプロパティを置き換えます。

2番目の方法は、インラインスタイルとして書き込むことです。余分なクラスの必要はありません！

.example { 
 
    font-size: 2em; 
 
    color: red; 
 
    padding: 2%; 
 
    display: inline; 
 
} 
 

 
.green { 
 
    color: green; 
 
}

<span class="example green">test</span> 
 

 
<span class="example" style="color:green;">test</span>

Answer 2

あなたはDIV要素の配置が同じままであることを確信しているならば、あなたはn番目の子プロパティを試すことができます。例： https://www.w3schools.com/cssref/sel_nth-child.asp

<div class="example2">I am a red font with properties </div> 
    <div class="example2">I am a green font with properties </div> 
    <div class="example2">I am a red font with properties </div> 

    Your style for that specific "example2" should be : 
    <style> 
    div.example2:nth-child(2){background-color:green;} 
    </style> 

例は、「背景色」であり、あなたにも「色」プロパティを設定することができます。