CSSの擬似コメント（または、ブラウザの解析方法）-CSSチュートリアル-php.cn

CSS伪注释 (或浏览器如何解析样式)

CSS仕様は言及されていませんが、CSSファイルでCスタイルおよび/またはUNIXスタイルのラインコメントをシミュレートする方法はいくつかあります（いくつかの制限があります）。他の人はこれについて以前に書いたことがあります（特に、CSSアノテーションはSitePointのWeb Foundationsの記事で説明されています）。この記事では、これについて詳しく説明します。

キーポイント

CSSは公式にはCスタイルのマルチラインコメントのみをサポートしていますが、擬似コメントは解析エラーを使用してコードを不注意にコメントします。
擬似コメントは、セミコロンの省略や認識されていない属性名の使用など、CSS宣言を奇形することで作成できます。その結果、後続のコードが無視されます。
擬似コメントのインラインと次の行の配置は、後続のCSSルールが適用されているかどうかに影響し、インラインの擬似コメントは、同じ行の後続の宣言を無効にする可能性があります。
擬似解決も @ルールに適用することができ、観測された動作は、 @ルールにボディブロックが含まれているか、セミコロンで終了するかによって異なります。
擬似コメントはデバッグに使用できますが、読みやすくなり、標準のCSSコメントを生産コードに置き換えるべきではありません。

cssコメント

仕様によると、CSSパーサーは、注釈スタイル、つまり、以下に示すように開始マーク/*およびエンドマーク*/を使用するCスタイル言語からのマルチラインコメントを正式にサポートしています。 >

したがって、コメントのルール宣言は無視されます：

<code>/*
  起始和结束标记之间（包括起始和结束标记）的字符将被解析器忽略，
*/</code>

ログイン後にコピー

コメントのブロック宣言は無視されます：

<code>body {
  background: red;
  /*
  background: white;
  */
}</code>

ログイン後にコピー

これらの例では、私たち全員が意図的に

<code>/*
body {
  background: red;
}
*/</code>

ログイン後にコピー

コメント構文を使用して、コンテンツを無視するようパーサーに指示します。

ただし、奇形のステートメントを使用するなど、これを予想外に行うこともあります。 この例では、セミコロンがないため、

背景宣言はどちらも適用されません。パーサーは次のセミコロンをスキャンして、2行のステートメント全体が正しくないことを判断するため、語彙分析全体の内容は無視されます。属性値を完全に省略した場合、同じことが起こります：

<code>body {
  background: red    /* 缺少分号 */
  background: blue;      
}</code>

ログイン後にコピー

および

これは、奇形のステートメントを...として使用できることを示しています。

pseudoコメント

<code>body {
  background:
  background: blue; /* 此声明未应用 */
}</code>

ログイン後にコピー

これらを「擬似コメント」と呼びます。厳密に言えば、これらはライン文字の最後に終了するコメントではないからです。代わりに、それらは後続の入力を奇形で動作します（後続の行でも）。これは、ルールセット、宣言ブロック、およびセレクターのエラー処理プロセスによるものです。

「セレクターのどこにでもエラーがある場合、セレクターの残りがCSS 2.1で合理的に見える場合でも、ステートメント全体を無視する必要があります。」

次の例（仕様からの抜粋）では、セレクターの無効な文字 "＆"のために2番目のルールセットが無視されます。

同様に、次の例では、背景プロパティ名に冗長文字が存在するため、2番目と3番目の宣言は無視されます。

英語のキーボードを一目見れば、次の特殊文字がシングルライン宣言のコメントとして機能することが明らかになります。

<code>/*
  起始和结束标记之间（包括起始和结束标记）的字符将被解析器忽略，
*/</code>

ログイン後にコピー

ただし、文字を使用しないでくださいが、cとunixの慣習に固執し、＃または//：

を使用します

<code>body {
  background: red;
  /*
  background: white;
  */
}</code>

ログイン後にコピー

semi-colon

セミコロンは、ルール宣言の最終マークです。したがって、彼らは続くテキストを「コメント」することはできません。仕様では、パーサーは、ぶら下がっているセミコロンを奇形の宣言

（名前、コロン、または価値の宣言が欠落している）として扱います。前述のように、通常のマルチラインコメント形式が誤っている場合、つまり、ルールセットまたは宣言の中で開始タグとエンドタグがバランスが取れない場合、パーサーは後続の宣言またはルールセットを無視します。パーサーは、影響を受ける宣言の次の宣言エンドタグ（半colon）を検索するため、次の以下は2つの背景宣言を「コメント」しました。

次のステートメントの前にコメントの後にセミコロンを追加してこの問題を修正します（そのため擬似コメントについては、セミコロンが並んでいない場合、効果は同じです：

<code>/*
body {
  background: red;
}
*/</code>

ログイン後にコピー

symicolon：

を復元して修正します

<code>body {
  background: red    /* 缺少分号 */
  background: blue;      
}</code>

ログイン後にコピー

次の行とのインライン

<code>body {
  background:
  background: blue; /* 此声明未应用 */
}</code>

ログイン後にコピー

これは、「擬似」という単語「擬似コメント」に入る場所です。これは、それを「コメント」と呼ばない正当な理由かもしれません。なぜなら、彼らはCまたはUNIXスタイルのラインコメントの最終的な慣習に違反しているからです。

<code>h1, h2 {color: green }
h3, h4 & h5 {color: red } /* h6 {color: black }</code>

ログイン後にコピー

1行に掲載された

擬似コメントは、次の行の宣言を抑制します。次の例では、背景は青色になります：

によって抑制された後に同じ行に掲載された擬似コメント。次の例では、背景は青の代わりに白になります：

インライン擬似解決を備えたCSSセレクターの「圧縮」バージョンでさえ、単一宣言の注釈として動作します。次の例では、パーサーによって認識されたコメントマーク＃が次のセミコロンで終了するため、最初の背景宣言は無視され、2番目の背景宣言は正しくフォーマットされていると認識されるため、適用されます（この場合、青は適用されます。体の背景）：

<code>body {
  background: red;
  xbackground: white;    /* 属性名称未被识别 */
  y background: blue;    /* 属性名称格式不正确 */
}</code>

ログイン後にコピー

（フォローアップコンテンツと同じです。スペースの制限により、残りの部分の残りの擬似オリジナルの創造物はここで省略されています。）

<code>selector {
  ~ property-name: ignored;
  ` property-name: ignored;
  ! property-name: ignored;
  @ property-name: ignored;
  # property-name: ignored;
  $ property-name: ignored;
  % property-name: ignored;
  ^ property-name: ignored;
  & property-name: ignored;
  * property-name: ignored;
  _ property-name: ignored;
  - property-name: ignored;
  + property-name: ignored;
  = property-name: ignored;
  | property-name: ignored;
  \ property-name: ignored;
  : property-name: ignored;
  property-name: ignored;
  . property-name: ignored;
  > property-name: ignored;
  , property-name: ignored;
  ? property-name: ignored;
  / property-name: ignored;
}</code>

ログイン後にコピー

以上がCSSの擬似コメント（または、ブラウザの解析方法）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。