cssセレクタの適切な順序は何ですか？例えばp.classまたは.class p

Question

私は気付いたいくつかのCSSをデバッグしている間、この宣言の順序に違いがあります。

1/ a.aname { display:inline; margin:0px;} 
2/ .aname a { display:inline; margin:0px;} 

<a name="download" class="aname"><h2>Download</h2></a> 

Iは主にクラススタイルを適用するために第2のフォームを使用している：第一は、第二のではないようだが、所望のようにアンカー内の見出しは、インライン表示させます。 これらがどのように適用されるかの違いは何ですか？それぞれを使用する際のガイドルールはありますか？答えから

---

Basicソリューション（それが悪いことだときに生じるCSS-困惑を避けるため）：

使用「直接選択」をelementtype.class{}かelementtype#id{}を直接要素にスタイルを適用します。規則が使用されるたびに一度影響を及ぼすように意図されたスタイリングのために。マージンの変更、表示の変更、継承していないフォントの変更。直接選択は子要素を継承せず、親要素のみに適用されます。

「子孫選択」.class elementtype{}または#id elementtypeを使用して、名前付きまたは分類された要素の子孫/子に型を適用します。要素の下に/要素が適用されるページのセクション内の要素型の外観を変更するためのスタイリング用。テキストセクションへのフォントの変更を継承したり、段落やリスト要素の書式変更を継承したりします。子孫選択は、すべての子要素に適用されますが、親には適用されません。

NBself：あまりにもできるだけ早く他のセレクタを学ぶ;）

Answer 1

違いは、CSSでの子孫コンビネータである、それらの間のスペースです。 .aname aクラスaname持つ要素の子孫であるアンカー要素と一致する一方

a.aname

セレクタクラスanameとアンカー要素に一致します：

<a class="aname">This matches the first rule</a> 

<span class="aname"><a>This matches the second rule</a></span> 

CSSコンビネータ：

space = descendant combinator 

> = child combinator (direct descendant) 

+ = adjacent sibling combinator 

を

Selectutorialは、概要やセレクタ、コンビネータを非常によく示しています。

識別子をコンビネータなしで一緒に配置できるセレクタを使用する場合は、順序は関係ありません。例：

#id.class { ... } 
.class#id { ... }