CSS 属性セレクター: 引用符はどのような場合に必要ですか?

CSS 属性セレクター: 引用符の難題

属性セレクターを使用すると、CSS 作成者は属性に基づいて要素をターゲットにすることができます。ただし、属性値を囲む引用符の有無は混乱の原因となっています。

CSS 仕様によれば、属性値は一重引用符または二重引用符を使用して引用符で囲むことも、完全に引用符で囲まないこともできます。次の例は、これらのバリアントを示しています。

a[rel="nofollow"]
a[rel='nofollow']
a[rel=nofollow]

一般に、値が英数字、ハイフン (-)、またはアンダースコア (_) のみで構成されている場合、引用符で囲まれていない属性値が許可されます。ただし、スペースやピリオドなどの特定の特殊文字を有効にするには引用符が必要です。

たとえば、次のセレクターは引用符なしでは機能しません:

a[href^=http://]

これは、次の理由によるものです。ピリオド文字は属性と値の間の区切り文字として解釈されます。引用符を使用すると、ピリオドが値の一部として確実に認識されます:

a[href^="http://"]

ベスト プラクティスとして、潜在的な競合を避けるために属性値を引用符で囲むことをお勧めします。これにより、属性値に特殊文字が含まれている場合でも、セレクターが意図したとおりに機能することが保証されます。

以上がCSS 属性セレクター: 引用符はどのような場合に必要ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。