ヒーロー行のCSSで複数のクラスをターゲットにする方法

Question

最初に、私はCSSに関してはハッカーです。可能な限り読むことと練習をして、より良いものにしようとしています。現在のところ、パディング、余白、フォントサイジングをモバイルからコントロールするために、一連のメディアクエリを行に追加しようとしています。そのため、テキストは、必要な場所に正確に配置されます。私の質問は、行のクラスを作成する方法です。したがって、これらのスタイルは、このコンテンツの行にのみ適用されます。この場合、画像上にhtmlテキストがある私のウェブサイトの最初の（主人公）行です。以下は、私が書いたり、チューニングの調整をいくつか与えたりしようとしているところです。 h2クラスとh3クラスのスタイリングを制御する単一のクラスを作成するにはどうすればよいですか？

@media only screen and (max-width: 481px) { 
#wrapper .hero h2 { 
    font-size: 36px!important; 
    } 
} 

@media only screen and (max-width: 481px) { 
#wrapper .hero h3 { 
    font-size: 22px!important; 
    } 
} 

コミュニティが共有できるすべてのガイダンスやサポートに感謝します。エルス

Answer 1

@media only screen and (max-width: 481px) { 
 
#wrapper .hero h2 { 
 
    font-size: 36px!important; 
 
    } 
 
#wrapper .hero h3 { 
 
    font-size: 22px!important; 
 
    } 
 
}

あなたはそれがあなたの希望が異なる子要素に異なるフォントサイズを適用することは明らかだ、あなたのCSSから、単一のクラスにコントロールの複数のプロパティに

Answer 2

を小さいかSASSプリプロセッサを使用することができます同じビューポート内にあります。この場合、同じプロパティ、つまりfont-sizeに2つの値を定義することはできず、ブラウザは両方を異なる要素に使用することを期待します。ただし、メディアクエリを1回だけ定義する必要があります。

@media only screen and (max-width: 481px) { 
#wrapper .hero h2 { 
    font-size: 36px!important; 
    } 
#wrapper .hero h3 { 
    font-size: 22px!important; 
    } 
}