6

CSS は、あるスタイルを別のスタイルに適用するタイミングをどのように決定しますか?

私はW3 の CSS3 セレクター ドキュメントを数回読んでおり、jQuery で CSS セレクターをより適切に使用する方法を理解するのに役立ちましたが、ある CSS ルールが別のルールに適用されるタイミングを理解するのにはあまり役立ちませんでした。

私は次のHTMLを持っています：

<div class='item'>
    <a>Link 1</a>
    <a class='special'>Link 2</a>
</div>

私は次のCSSを持っています:

.item a {
    text-decoration: none;
    color: black;
    font-weight: bold;
    font-size: 1em;
}

.special {
    text-decoration: underline;
    color: red;
    font-weight: normal;
    font-size: 2em;
}

上記の場合、リンク 1 とリンク 2 の両方が、.item aCSS によって決定されるように同じスタイルになります。に関連付けられたスタイル.specialがリンク 2 で優先されないのはなぜですか?

明らかに、次のように回避できます。

.special {
    text-decoration: underline !important;
    color: red !important;
    font-weight: normal !important;
    font-size: 1em !important;
}

しかし、それは私の理解不足のために振り込まなければならないハックのように感じます.

4

3 に答える 3

10

IDs、、classesに基づいていtagsます。 IDs特異性が最も高く、classes次にtags、したがって：

.item a     == 0 1 1      0 (id) 1 (class=item) 1 (tag=a)
.special    == 0 1 0
#foo        == 1 0 0
#foo .bar a == 1 1 1
#foo #bar   == 2 0 0

勝ちが最も多い方:)同点の場合、ドキュメントの最後に来る方が勝ちます。1 0 0ビートに注意してください0 1000 1000

申請する場合.specialは、より具体的にしてください。.item a.special

于 2012-02-03T18:28:56.360 に答える
2

将来の参考のために、このことをよく知っておくことをお勧めします。この特定のケースでは、Cascading Order のポイント 3 に注意してください。

  1. セレクター内の ID 属性の数をカウントします。
  2. セレクター内の CLASS 属性の数をカウントします。
  3. セレクター内の HTML タグ名の数をカウントします。

これらがコードに適用されている場合、 に.item aは 1 つのクラス属性 + 1 つの HTML タグ名がありますが、.specialクラス属性は 1 つしかありません。したがって、前者は特別なリンクをスタイルする権利を獲得します。

于 2012-02-03T18:35:56.077 に答える
1

http://www.w3.org/TR/CSS21/cascade.html#specificityは、公式の特異性仕様です。

しかし、それがTL; DRの場合、（短すぎる）バージョンは、セレクターに含まれる単語が多いほど、特異性が高くなります。そして！importantはさらに高くなります。それについてです。

編集：ああ、あなたのリンクには私のものと同じ情報があるようです。申し訳ありません。

于 2012-02-03T18:29:34.307 に答える