23

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; }
4

5 に答える 5

19

どちらも完全に使用でき、答えは特定のソリューションによって異なります。たとえば、そのクラスによって定義された共通のプロパティを共有している他の領域がある場合は、それを可能な限り一般的にしたいと思います。たとえば、ナビゲーションがあり、その領域のリンクがいくつかの共通要素を共有している場合、それらは次のように定義できます。a.link

次に、ネストされたhtmlで、次のようなことを行うことができます。

.someclass a.link {font-size:8px}そのテキストを小さくします。

特異性がどのように機能するかを説明する記事は次のとおりです。http：//coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

于 2012-05-17T23:30:55.757 に答える
5

どちらも完全に有効であり、どちらを使用するかは、何をしたいかによって異なります。

要素や要素の場所に関係なく、サイト全体で使用できるジェネリック クラスを作成する場合は、.class. これの良い例は.icon、リンク、リスト項目、見出しなどで使用したいものです。そして、それらをどこでも使用できるようにしたいと考えています。

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

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

「.link最高、次善a.link、長いセレクターが悪い」と言うのは間違っています。それはすべて状況に依存します。

于 2012-05-18T00:04:09.393 に答える
2

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

于 2012-05-17T23:24:09.877 に答える
2

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

ただ使うとさらに良いです.link。それが最良の選択肢です。

于 2012-05-17T23:45:17.427 に答える
1

a.linkはそれを行うための最良の方法です。特定のa.linkを他のリンクとは異なるものにしたい場合は、それにウェイトを追加する必要があります。

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

子孫セレクター（2行目）は、要素にスタイルを追加するための最も効率的な方法ではないため、慎重に使用してください。個人的には、特定のID/クラス内のグローバルクラスに特別なスタイルを与える必要がある場合に使用します。

于 2012-05-17T23:30:04.943 に答える