ホームページ >ウェブフロントエンド >CSSチュートリアル >CSS 属性セレクター: 引用するか引用しないか?

CSS 属性セレクター: 引用するか引用しないか?

Linda Hamilton
Linda Hamiltonオリジナル
2024-12-11 05:50:10374ブラウズ

CSS Attribute Selectors: To Quote or Not to Quote?

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

要素の属性に一致する CSS 属性セレクター (a[rel= など) を作成する場合nofollow"] を使用すると、引用符を含めるかどうかという永続的なジレンマが発生します。マーク。

引用符の質問

CSS 仕様では、属性値を囲む引用符の配置など、属性セレクター構文のガイドラインが規定されています。

引用符です必要?

通常、属性値が英数字のみで構成されている場合、引用符は必要ありません。ただし、次の例外が存在します。

  • 空白を含む値 (例: a[title=My Page])
  • CSS 構文に特殊な文字を含む値 (例: アスタリスク、括弧など) .)
  • ハイフンで始まる値 (例: a[class=invalid-class])

有効なセレクターの例

前述のルールに基づいて、次の属性セレクターが有効であるとみなされます:

a[rel="nofollow"]
a[href^="http://"]
a[data-id='123']

最高実践

英数字の値の引用符はオプションですが、一貫性を確保し、潜在的な競合を防ぐために引用符を含めることがベスト プラクティスと考えられます。

リソース

このトピックの徹底的な分析については、以下を参照してください。 to:

  • [HTML および CSS の引用符で囲まれていない属性値](回答で提供されるリンク)
  • [引用符で囲まれていない属性値バリデーター](回答で提供されるリンク)

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

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。