CSS でドット付き ID を持つ HTML 要素をターゲットにする方法

点線 ID を持つ要素の CSS ID 選択

CSS 仕様では、ID セレクターが特定の HTML 要素を識別できるようにしています。ただし、ID にピリオド (.) が含まれる場合に問題が発生します。 CSS ID セレクターは、そのような ID をネイティブにサポートしません。

CSS 仕様には明確な記載がありませんが、CSS ID セレクターはピリオド付きの ID をタグ名とクラス セレクターの組み合わせとして扱うことが前提となっています。たとえば、「#id.class」は、ID「id」およびクラス「class」を持つすべての要素を対象とします。

ただし、ドット付き ID を持つ HTML 要素を参照する外部 CSS ルールを定義すると課題が生じます。 。 CSS 仕様では、CSS の「識別子」にピリオド文字が含まれないことが指定されています。これにより、HTML と CSS 仕様の間に不一致が生じる可能性があります。

CSS ID セレクターを使用する別の解決策は、他の CSS 選択タイプを検討することです。ただし、HTML ID の変更が不可能な場合には、回避策が存在します。

CSS 仕様に従って、バックスラッシュ () エスケープが許可されています。したがって、ドット付き ID を持つ HTML 要素をターゲットにするには、次の構文を使用します。

#some\.id {
  /* CSS Declarations */
}

この例では、ピリオドの前のバックスラッシュにより、CSS セレクターが ID「some.」の要素を正しく識別できるようになります。 id."

以上がCSS でドット付き ID を持つ HTML 要素をターゲットにする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。