0

CSS の 2 つのクラスが同じ派生クラスを持つ場合、CSS はどのように適切なクラスを解決しますか?

例えば：

.ClassA.Left {}
.ClassB.Left {}
.Left {}

クラス 'Left' は任意のオブジェクトに適用できるため、それが必要なものであることをどのように保証できますか? 「左」をバインドするために使用される優先度は?

4

3 に答える 3

0

特異性

コンセプト

特異性とは、ブラウザがどのプロパティ値が要素に最も関連性があり、適用されるかを判断する手段です。特異性は、さまざまな種類のセレクターで構成される一致ルールのみに基づいています。

どのように計算されますか？

特異性は、各セレクタ タイプのカウントを連結して計算されます。対応する一致式に適用される重みではありません。

特定性が等しい場合、CSS で見つかった最新の宣言が要素に適用されます。

注: ドキュメント ツリー内の要素の近接性は、特異性には影響しません。

特異性の三日月順

次のセレクターのリストは、特異性を高めることによるものです。

  • ユニバーサルセレクター
  • タイプセレクター
  • クラスセレクター
  • 属性セレクター
  • 疑似クラス
  • ID セレクター
  • インライン スタイル

重要な例外

スタイル宣言で !important ルールが使用されている場合、この宣言は、宣言リストにある場所に関係なく、CSS で作成された他の宣言をオーバーライドします。ただし、!important は具体性とは関係ありません。

:not 例外

否定疑似クラス :not は、特異性の計算では疑似クラスとは見なされません。ただし、否定疑似クラスに配置されたセレクターは、通常のセレクターとしてカウントされます。

ソース: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

于 2013-09-21T17:30:41.577 に答える
0

同様に、要素に 3 つのクラス (ClassA、ClassB、および Left) がすべて含まれている場合、CSS シートにクラスがリストされている順序が重要になります。

.ClassA.Left はカスケード内で .ClassB.Left の方が低いため、.ClassB.Left (共通プロパティの場合) によって打ち負かされます。

単一のクラス セレクターは複数のクラス セレクターよりも優先されるため、.ClassA.Left は .ClassA よりも優れています

HTML 内のクラスのソース順序は重要ではありません。

Codepen 特異性の例

于 2013-09-21T17:32:29.880 に答える