5

次のような CSS コードを見つけました。

p {
  color: white;
}
\p {
  background: green;
}
\* {
  background: #bcc;
}
body \2a {
  background: red;
}
.recover {
  background: #6ea;
  color: black;
}
div {
  border: 2px solid blue;
}
ul,
li,
a {
  background: none;
}
<p>This should have a green background</p>
<div>This should have no background color</div>
<p class="recover">CSS has recovered</p>

Firefox および Internet Explorer 10 では、結果は HTML に記載されているとおりです。しかし、Chrome ではまったく異なります。

この例でのバックスラッシュの使用法は何ですか?

4

1 に答える 1

2

この例のスラッシュは、文字をエスケープするために使用されます。

body \2aのエンコードされたバージョンとbody *同じように効果的です。W3C は次のように述べています (明確にするために太字を追加)。\2a*

CSS では、識別子 (セレクターの要素名、クラス、および ID を含む) には、文字 [a-zA-Z0-9] と ISO 10646 文字 U+00A0 以降、およびハイフン (-) とアンダースコア ( _); 数字、2 つのハイフン、またはハイフンの後に数字を続けることはできません。識別子には、エスケープ文字と ISO 10646 文字を数値コードとして含めることもできます(次の項目を参照)。たとえば、識別子「B&W?」「B\&W\?」と表記される場合があります。または「B\26 W\3F」。

文字とケース ( https://www.w3.org/TR/CSS2/syndata.html#characters )

次の表は2a、* の 16 進コードを示しています。

Unicode コード ポイント文字 UTF-8 (16 進数) 名
U+002A * 2a アスタリスク

UTF-8 エンコーディング テーブルと Unicode 文字 ( http://www.utf8-chartable.de/ )

\*W3C で言及されて\pいるように、文字をエスケープする別の方法です (明確にするために太字が追加されています)。

次に、CSS の特殊文字の意味を無効にします。任意の文字 (16 進数、ラインフィード、キャリッジ リターン、またはフォーム フィードを除く) をバックスラッシュでエスケープして、その特別な意味を取り除くことができます。たとえば、"\"" は 1 つの二重引用符で構成される文字列です。スタイル シートのプリプロセッサは、スタイル シートの意味を変更するため、スタイル シートからこれらのバックスラッシュを削除してはなりません。

文字とケース ( https://www.w3.org/TR/CSS2/syndata.html#characters )

p は 16 進数ではないため (0 ～ 9 の数字と A～F の文字) \p、標準的なルールとして扱われます。ルールの場合、\aa は 16 進数であるため無視されますが、16 進数\sでない場合は受け入れられます (以下のスニペットの\aとを参照)。\s

Firefox は、クラス識別子 (以下のスニペットを参照) でエスケープ文字を受け入れますが、スタイルが適用されない理由である.B\26 W\3Fユニバーサル セレクター ( ) としてそれを無視するようです。*Chrome と Firefox はどちらも、エスケープされた隣接セレクタ ( +) を無視します。

これが、Chrome で次の原因となっている理由です。

  • のto be asは と同等の特異性を持ちますbackground-colourが、スタイルシートではその後に配置されます<p>This should have a green background</p>redbody *p
  • のbackground-colourはルール<div>This should have no background color</div>に一致し、この要素redの をオーバーライドするものは他にありません。background-colour
  • のbackground-colour、htmlなどbodyのルールが一致して#bccいる\*

どちらが正しい動作であるかを言うのは難しいですが、仕様がわずかに異なる方法で解釈されているように見えるだけです.

これらのルールが使用される理由については、作成者が特定のスタイルで特定のブラウザーをターゲットにしようとしているという説明しかありません。

p {
  color: white;
}
\p {
  background: green;
}
\* {
  background: #bcc;
}
body \2a {
  background: red;
}
.recover {
  background: #6ea;
  color: black;
}
.recover:after {
  content: '\2a';
  display: block;
}
div {
  border: 2px solid blue;
}
.B\26 W\3F {
  background: black;
  color: white;
}
.B\26 W\3F \2b div {
  background: purple;
  color: white;
}
\a {
  border: 2px solid blue;
}
\s {
  border: 2px solid blue;
}
<p>This should have a green background</p>
<div>This should have no background color</div>
<p class="recover">CSS has recovered</p>
<p class="B&W?">Encoded test</p>
<div>Encoded adjacent test</div>
<a href="#">Hexadecimal digit</a>
<s>Non hexadecimal digit</s>

于 2016-02-11T12:26:13.843 に答える