CSSで複数のクラスを選択するには？

Question

idを一度だけ使用してこれらのすべてを選択する方法がありますか#load？

#load p, 
#load h1, 
#load h2, 
#load h3, 
#load h4, 
#load h5, 
#load h6 { 
    font-size: 80%; 
    margin:2%; 
} 

Answer 1

すべてを必要としない限りではありません。 #load *ですべてを得ることができます。

Answer 2

彼らは常に#loadの直接の子であることを行っている場合、あなたは

#load > * { 
    font-size: 80%; 
    margin: 2%; 
} 

を行うが、これらのルールは#load

のいずれかの直接の子に適用されますことを心に留めておくことができそうでないあなたも選ぶことができ例えば、load-childのようなすべてのクラスを与えるために

#load .load-child { 
    font-size: 80%; 
    margin: 2%; 
} 

Answer 3

CSSでは、特定のプロパティがtを継承します彼はhtml要素をカプセル化する（手動でオーバーライドしない限り）

#load { 
 
    font-size: 40px; 
 
    margin: 2%; 
 
}

<div id=load> 
 
    <p>hello from p</p> 
 
    <h3>hello form h3</h3> 
 
</div>

あなたはherefont-sizeがデフォルトで継承されたプロパティです見ることができるように：これは、あなたが簡単に行うことができることを意味します。 （この参照は、CSS2である - 私はどこでもCSS3のものを見つけることができません？）

はこれがrequried #load CSSは今その子hとp要素をカプセル化することを意味します。

ノートの例では、可視性のために40ピクセルしか置いていません。

https://www.w3.org/wiki/Inheritance_and_cascadeは素早く要素継承を読むことができますが、要約してください。

継承により、ハイレベル要素のプロパティを宣言し、それらのプロパティをすべての子孫要素にトリクルすることができます。デフォルトでは一部のプロパティのみが継承されますが、inheritキーワードで継承を強制できます。

Answer 4

あなたはいつもの要素にクラスを追加することができます

<h1 class="myclass"></h1> 
<h2 class="myclass"></h2> 
etc... 

And then select them all with that class: 

#load .myclass { 
    font-size: 80%; 
    margin:2%; 
} 

---

あなたはSASS（または任意のCSSプリプロセッサ）を使用する場合、それはこのようになります。

#load { 
    p, h1, h2, h3, h4, h5, h6 { 
    font-size: 80%; 
    margin: 2%; 
    } 
} 

SASSが必要ですサーバー上で停止し、コードを純粋なCSSにコンパイルします。結果はあなたが質問に投稿したのと同じことになります。

---

私は、オプションとしてこれを追加すること
だ。また、マッチング CSSセレクタがあります。

#load :-moz-any(p, h1, h2, h3, h4, h5, h6) { /* firefox 4+*/ 
    font-size: 80%; 
    margin:2%; 
} 

#load :-webkit-any(p, h1, h2, h3, h4, h5, h6) { /* chrome 15+, safari 5+, opera 15+ */ 
    font-size: 80%; 
    margin:2%; 
} 

がIEによってmatching selectorはサポートされていません/ Edge