2

CSSセレクターについて質問です。

次のhtmlがあるとします

<div class="message">
  <div class="messageheader">
    <div class='name'>A news story</div>
  </div>
</div>

CSS では、このようにclass呼び出されたものを参照できますname

div.message div.messageheader div.name {}

また

.name {} /* ie *.name{} */

ある方法は他の方法よりも優れていますか?

と呼ばれるクラスの追加の「インスタンス」がある場合name、つまり

<div class="message">
   <div class="messageheader">
      <div class='name'>A news story</div>
   </div>
</div>

<a class='name'>A news story</div>

div.message div.messageheader div.name {}最初のインスタンスと 2 番目のインスタンスを参照するために使用できますa.name {}が、最初のシナリオのみに関心があります。

4

5 に答える 5

3

.name を使用した最初のシナリオにのみ関心がある場合は、問題ありません。実際、CSS のベスト プラクティスは、常により一般的なものから始めて、作業に集中することです。

また、 div.* のようなことをする必要はありません。ただし、別の要素に同じクラスがあり、それらを異なるものにしたい場合を除きます。クラスをネストしている場合は、さらに不要です。.messageheader .name は同じターゲティングを提供します。

CSS はカスケードを意味することを忘れないでください。すべてを的を絞ったものにすると、すべての要素を再定義する必要があります。

于 2008-11-26T14:26:23.407 に答える
2

私の意見では、それは本当にあなた次第です。1 つの方法は短く、もう 1 つの方法はより正確ですが、ほとんど同じままのマークアップに依存しています。複雑なプロジェクトの場合は、より具体的にすることが正しい方法かもしれません。それ以外の場合は、もう少しリラックスしてください。試してみて、バランスを見つけてください。

ただし、 CSSでカスケードを利用することが重要であることを忘れないでください。本当に必要のないものにクラスと ID を追加するのはなぜですか?

于 2008-11-26T14:27:38.117 に答える
2

Jeremy B さんの回答に同意しますが、何か追加したいです。

あなたの例では、次のように name というクラスを参照できます

div.message div.messageheader div.name {}

また

.name {}

また

div.name

最初のルールは、特定性の低いルールをオーバーライドしたい場合に適しています。2 つ目はジェネリックです。あなたが言ったように、3番目は、同じクラスを使用して異なる要素に異なるスタイルを適用したい場合に適しています(ただし、この最後のケースでは、クラスの割り当てに何か問題があった可能性が高いです)。

これは単なる例であることはわかっていますが、コードにはクラスが多すぎます。可能であれば要素セレクターを使用することをお勧めします。つまり、その div、またはクラス「messagehader」を持つ div 内のすべての div に何らかのスタイルを与えたい場合は、このセレクターを使用する必要があります。

div.messageheader div

クラスのメッセージヘッダーを削除し、その div を次のように選択することもできます。

div.message div

等々。

明らかに、ページでいくつかのクラスを使用する必要がありますが、すべてにクラスを与えないでください。多くの場合、必要ありません。

于 2008-11-27T15:37:22.610 に答える
1

一般に、特異性は好ましいものですが、階層レベルではユニット レベルよりも優れています。私が言いたいのは、それ'div'は不必要であり、おそらく害を及ぼす (次の段落を参照) こと#foo .bar .bazですが、良い習慣です。

一般に、私は人々に CSS を OO の用語で考えてもらうようにしています。スタイルをクラスとして定義している場合は、クラスとして動作していることを確認してください。この場合div.foo、ただではなくアサートすること.fooは、サブクラスを定義したことに少し似ています。そのつもりならいい。将来のマークアップに関する潜在的な問題について常に考えてください。理想的には、将来のコードが必要なものを正確に自動継承し、あいまいな CSS アサーションによって汚染されたり、過度に具体的なアサーションのために何かが失われたりしないようにする必要があります。

実際には、通常は次の形式を好むことがわかります。

#foo .bar {}

最も一般的なスタイルのみにルート レベル クラスを予約します。

于 2008-11-26T14:32:50.587 に答える
0

両方の方法を一緒に使用すると、CSS を論理的に編成するのに役立つことがわかりました。そのクラスのすべてのアイテムに適用するプロパティには一般的な「.class」を使用し、クラスの特定の型オブジェクトにはより具体的な「p.class」を使用します。例えば：

<style>
div.product {
float: left;
padding: 1em;
border: 1px solid blue;
}
.price { 
color: #009900;
}
p.price {
text-align: right;
}
</style>

<div class="product">
    <p>Lorem ipsum <span class="price">&pound;8.99</span> dolor sit amet.</p>
    <p class="price">&pound;5.99</p>
</div>

あなたの質問への答えは、どちらの方法も優れているということではなく、単に異なることを行うだけです。是非両方使ってください！さまざまなセレクター タイプの力を活用することは、優れた CSS の重要な側面であり、冗長性を抑える優れた方法です。その他の便利な方法は、1 つのオブジェクトで複数のクラスを使用すること (例: <p class="someClass someOtherClass">)、オブジェクトでクラスと id を組み合わせること (これらは相互に排他的ではありません)、HTML の親子関係を使用して回避することです。可能な限り「オーバークラス」 (例: ul li.someClass {} の代わりに ul.someClass li {})。ハッピーコーディング！

于 2008-11-27T15:11:12.490 に答える