1

CSSの特異性について非常に具体的な質問がありますが、これについては明確に理解できませんでした。 http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

矛盾しないプロパティ/属性を定義する2つのセレクターがある場合、両方の属性が引き続き適用されるか、またはその動作方法は、セレクター内で定義されているものを気にせずに、セレクターを比較するだけです。

だから私たちが持っている場合;

.menu1 {color:red}
p.menu1 {font-size:10px}

ここでは、両方のセレクターが「menu1」を参照していますが、無関係な属性(color / font-size)を定義しています。

だから私の質問は、特異性はまだ重要であり、2つのうち1つだけが考慮されるのですか?私の質問は、実際の実装がどのように行われるかについてです。

4

2 に答える 2

1

記事の概要では、ポイント11は次のように述べています。

11.定義された最後のルールは、以前の競合するルールをオーバーライドします。

(「最後のルール」は「最後または最も具体的なルール」に置き換えることができます)

したがって、異なるプロパティがある場合、何もオーバーライドされません。2つのルールが組み合わされp.menu1ているため、フォントサイズはすべて10ピクセルで、色は赤になります。2番目のルールには、さらに具体的なセレクターがありますが、オーバーライドされる可能性のある共通のスタイルを指定するまでは、単に関連性がありません。

これらすべてが実装でどのように行われるかは、まあ、実装の詳細なので、わかりません。

于 2011-08-23T11:37:39.363 に答える
1

menu1いいえ、この場合、既存のルールを変更することなく、クラスにプロパティを追加するだけなので、特異性は重要ではありません。ただし、ルールの順序を逆にしてオーバーライドしようとすると、次のようになりますcolor

p.menu1 {color:blue}
.menu1 {color:red}

その場合、「青」のルールのに「赤」のルールが表示されても、より具体的でないルールはより具体的なルールを上書きし.menu1 {color:red} ません(試してみてください)。 p.menu1 {color:blue}

もちろん、2番目のルールを変更するp.menu1 {color:red}と、2つのルールの特異性が同じになるため、オーバーライドされます。

于 2011-08-23T11:51:39.137 に答える