1

CSSの単純な動作について混乱しています。

私は<a class="cool-element"></a>DOMにいくつかの要素を持っていますが、domの他のタイプの要素には、divでさえも、「cool-element」クラスがありません。だから私はそれらを選択しようとするためにこれをしました：

.cool-element {
  background-color: red;
}

驚いたことに、それはうまくいきませんでした。しかし、私がそうするなら

a.cool-element {
  background-color: red;
}

期待通りの結果が得られました。私はこれをFirefoxと他の多くのCSSルールがロードされているアプリでテストします。私はこれを単独でテストしていませんが、他のいくつかの場所で最初のセレクターを使用して成功していると確信しています。ここでの最初のセレクターは常に完全に正常に機能するはずではありませんか、それとも何かが足りませんか？

4

2 に答える 2

1

問題はcssのクラスのセレクターではなく、それらを配置する順序にある​​場合があると思います。そのため、最初にそのクラスがあり、次にそれらをオーバーライドまたは変更する別のルールがある場合、期待される結果は得られません。ルールの適用方法を整理して、もう一度比較してみてください。

これを仮定しましょう：

<div class="topclass">
   <a class="myclass1" href="#">a link</a>
</div>

a.myclass1{
    background-color:red;
}

a{
  background-color:blue;
 }

.topclass a{
   background-color:yellow;
 }

最終的にレンダリングされる色は、アンカーの黄色です。

于 2012-11-29T07:40:37.647 に答える
1

CSSの特異性

CSSでは、より具体的なルールがより具体的でないルールよりも優先されます。以下を使用して、特定のセレクターの特異性を計算できます。

  1. インラインスタイルの場合は+1000-インラインスタイルが常に優先されます
  2. IDの場合は+100-要素のid属性
  3. クラスまたは疑似クラスの場合は+10-クラス属性または：hover
  4. 要素または疑似要素の+1-html、body、div、p ...または：first、：last

セレクターは、それより少ないポイントですべてのセレクターをオーバーライドします。ポイント数が同じ場合は、注文が重要です。

例

a.class-name = 1 + 10 = 11
a#id.class-name = 1 + 100 + 10 = 111
a.class-name.class2-name = 1 + 10 + 10 = 21

ポイントがどのように計算されるかを学ぶまで、CSSは私の頭の中では暗い芸術でした。それを説明するのにより良い仕事をするかもしれないcss-tricksに関する良い記事があります-CSS特異性値の計算セクションにジャンプしてください

注文事項

Jorge Alvaradoが順序の問題について述べたように、同じ要素に適用される2つのルールがある場合、2番目のスタイルが最初のスタイルをオーバーライドします。

a.class-name { background: red } #this rule will be overridden
a.class-name { background: green } #this rule will be applied
于 2012-11-29T08:10:56.103 に答える