3

以下がテキストを赤くするのはなぜですか?

#stories li a {color:red}
.default li.expand a {color:green}
li.expand a {color:blue}

<ul id="stories" class="default">
   <li>this is the end</li>
   <li class="expand">this is the end</li>

#stories を他のものに付けた場合にのみ、テキストが変更されます。# は css の上位にあるにもかかわらず、より優位性がありますか?!

4

5 に答える 5

5

http://htmldog.com/guides/cssadvanced/specificity/によると、「#」(ID セレクター) の特異性が最も高いため、「#」が付いているものは、そうでないものよりも優先されます。同じものに。

詳細については、そのリンクを確認してください。

于 2009-02-05T04:08:14.587 に答える
1

基本:

同じセレクターを使用している限り、これは当てはまります。

インライン スタイルの優先度 1 head で定義されたスタイルの優先度 2 リンクされたスタイルシートのスタイルの優先度 3

しかし、さらに優先度の高いルールもあります

リンクされたスタイルシートのみを使用するか、head でスタイルを定義する場合は、次のようになります。

優先度 1: ID (1 つしか存在できないため)
優先度 2: .classes (.class を追加する必要があるため)
優先度 3: タグ (.class または ID が添付されていないため、最も低い優先度)

ID が body に近いほど優先度が高くなります。

<div id="first-id">
  <div id="second-id">
    <div class="someclass">

    </div>
  </div>
</div>


#first-id .someclass {}

ビート

.someclass {}

としても

#second-id .someclass {}

しかし

.someclass を使用して ID を打ち負かすことができます

.someclass { color:#f00 !important;}

しかし、!important; のブラウザー サポートについてはよくわかりません。

于 2009-02-05T04:35:14.687 に答える
0

セレクターは、ルールの具体性に基づいて機能します。ID は特定の要素を一意に識別するため、可能な限り具体的です。

次の例を見てください。

 <ul id="stories" class="default">
   <li>this is the end</li>
   <li class="expand">this is the end</li>
 </ul>
 <ul class="default">
    <li>this is the end</li>
    <li class="expand">this is the end</li>
 </ul>
 <ul>
   <li>this is the end</li>
   <li class="expand">this is the end</li>
 </ul>

セレクターがそのように機能しない場合、#stories リストだけをターゲットにするにはどうすればよいでしょうか?

于 2009-02-05T04:23:42.293 に答える
0

それが機能する方法のようです（イライラすることもあります）。IDセレクターはクラスよりも具体的です。

于 2009-02-05T04:11:25.063 に答える