CSSでネストされた要素をターゲットにする

Question

たとえば、CSSでターゲットにしたいマークアップを深く入れているとしましょう。それは何でもかまいませんが、例えば：

<div> 
    <div id='someid'> 
     <span class='someclass'> 
      <a class='link' href='alink'>Go somewhere</a> 
     </span> 
    </div> 
<div> 

はこのように、直接<a>タグをターゲットにCSSルールを記述することが許容できますか？

a.link { font-size: large; } 

これは非標準と見なされ、一部のブラウザでは失敗する可能性がありますか？チェーンの各要素をこのようにターゲットにする必要がありますか？

div div span.someclass a.link { font-size: large; } 

Answer 1

どちらも完全に使用可能で、答えはご使用のソリューションによって異なります。たとえば、そのクラスで定義されている共通のプロパティを共有する他の領域がある場合は、できるだけ一般的なものにしておきたいと考えています。例えば、あなたがナビゲーションとその領域内のリンクは、あなたのネストされたHTMLに続いてa.link

によってそれらを定義することができ、いくつかの共通要素を共有している場合は、そのテキストを小さくする

.someclass a.link {font-size:8px}ような何かを行う可能性があります。ここで

は特異性がどのように機能するかについて説明の記事です：http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

Answer 2

よりターゲットを絞ると、柔軟性が低下します。それはあなた自身のトレードオフです。リンクに特定のクラスを与えるつもりなら、最初の例を守るために、このツリーの内側に表示されているかどうかにかかわらず、視覚的に同じであると確信しています。

Answer 3

a.linkはこれを実行する最善の方法です。特定のa.linkを残りのものと異なるようにしたい場合は、それに何らかの重みを加える必要があります。

a.link { ... } /* Global */ 
span.someclass a.link { ... } /* Finds all a.link within span.someclass */ 

子孫セレクタ（ライン2）要素にスタイルを追加するための最も効率的な方法ではありませんので、慎重にそれらを使用しています。個人的には、特定のID /クラス内でグローバルクラスに特別なスタイルを指定する必要があるときに使用します。

Answer 4

実際に代わりに特異性とパフォーマンスの問題を引き起こす可能性が長く、醜い番目のオプションのa.linkを使用することをお勧めします。

.linkを使用するとさらに優れています。それが最良の選択肢です。

Answer 5

どちらも完全に有効です。どちらを使用するかは、実行する内容によって異なります。

あなたは要素は、あなたがすべきのみ使用.classここであなたが要素とに関係なく、サイト全体を通じて使用できるようにする汎用的なクラスを作成している場合。これの良い例は、.iconのようなもので、リンク、リストアイテム、見出しなどに使用したい場合があります。どこでもを使用したいと考えています。

特定のタイプの要素に固有のクラスのみを作成する場合は、セレクタ内の要素を使用することをお勧めします。この例では、HTMLで<ul>を指定する必要があるため、1行に表示したい箇条書きリストになります。これはCSSでも指定する必要があります。 ul.inline。こうすることで、他の要素にも "インライン"クラス名を使用することができます。スタイリングはその両方に影響しません。

要素を選択するためにクラスを使用していても、一般的なスタイルを持つべきではない場合は、具体的にする必要があります。たとえば、#blog-post要素の最初の段落を大きくしたい場合は、#blog-postとの両方のクラスを指定する必要があります。 #blog-post p.first（これらのタイプのクラスは、:first-of-type、h2 + pなどの高度なセレクタのおかげでほとんど必要ではないことに注意してください）。

「.linkが最高です。a.linkが第2位でロングセレクターが悪い」と言っているのは間違っています。それはすべて状況によって異なります。