2

2つ以上のクラス名が割り当てられたHTMLクラス属性、つまり、

<tag class="a b">....</tag>

さまざまなブラウザーでテストできます -- http://jsfiddle.net/PP9yf/1/のテストまたはこの質問/回答を参照してください -- そして常識的なルールを推測します:

class="a"定義されている場合は使用するか、定義されている場合は使用するかclass="b"、両方が定義されている場合は両方を使用します...そして、両方を使用する場合、同じプロパティを割り当てると、最後の CSS 定義が他のものをオーバーライドします。

したがって、たとえばclass="a b"は と同じでなければならないと解釈できclass="b a"ます。

しかし、それはW3Cの公式解釈ですか？

このルールを言うW3C標準はどこですか？

PS:この別の質問から始めましたが、私の動機はソフトウェア開発です。emogrifierなどに似たソフトウェアを開発するには、この規範的な答えが必要です。

例: CssToInlineStyles にはこの修正が必要です... ただし、W3C の立場があり、ソフトウェアが間違っていると言っている場合にのみ、「修正」が必要です。

4

1 に答える 1

5

あなたの発見は正しく、それらは公式のW3C仕様です。

要素自体の2つのクラスは、同じ'origin'を持っています。また、セレクターの「重み」は同じです。これらのルールやその他のルールは、どのスタイルが優先されるかを決定しないため、スタイルシートの順序によってオーバールールが決定されます。

これを指定するルールについては、カスケードスタイルシート、レベル1、段落3.2を参照してください。3.2.1から3.2.4は、2つのスタイルのいずれも区別しません。普及しているのは3.2.5です。

ここでルールを引用しますが、ドキュメントを読んでコンテキストに配置することもできます。

競合するルールはCSSメカニズムに固有のものです。要素とプロパティの組み合わせの値を見つけるには、次のアルゴリズムに従う必要があります。

  1. 問題の要素/プロパティに適用されるすべての宣言を検索します。セレクターが問題の要素と一致する場合、宣言が適用されます。宣言が適用されない場合は、継承された値が使用されます。継承された値がない場合（これは「HTML」要素と継承されないプロパティの場合です）、初期値が使用されます。
  2. 明示的な重みで宣言を並べ替えます。「！important」とマークされた宣言は、マークされていない（通常の）宣言よりも重みが大きくなります。
  3. 発信元で並べ替え：作成者のスタイルシートは、UAのデフォルト値を上書きするリーダーのスタイルシートを上書きします。インポートされたスタイルシートは、インポート元のスタイルシートと同じ起点を持ちます。
  4. セレクターの特異性でソート：より具体的なセレクターは、より一般的なセレクターをオーバーライドします。特異性を見つけるには、セレクターのID属性の数（a）、セレクターのCLASS属性の数（b）、およびセレクターのタグ名の数（c）を数えます。3つの数を（大きな基数を持つ記数法で）連結すると、特異性が得られます。
  5. 指定された順序で並べ替えます。2つのルールの重みが同じである場合、指定された後者が優先されます。インポートされたスタイルシートのルールは、スタイルシート自体のルールの前にあると見なされます。

要約

常識的なルールitensをW3CCSS1ルール3.2itensに変換できます。

  • «定義されている場合はclass="a"を使用するか、定義されている場合はclass = "b"を使用するか、両方が定義されている場合は両方を使用します»3.2.1と同等です。«セレクターが問題の要素と一致する場合、宣言が適用されます» 。

  • «最後のCSS定義は他の定義をオーバーライドします»は3.2.5と同等であり、«後者の指定が勝ちます»。

新しい標準では変更されません。CSS2、CSS2.1、CSS3は同じルールを使用します。

于 2012-12-12T22:26:54.607 に答える