web-dev-qa-db-ja.com

CSS属性セレクター：引用符のルール（ "、 'またはなし？）

この質問は、しばらくの間私を悩ませてきました。要素の属性と比較するCSSセレクターを作成するとき。

a[rel="nofollow"]

引用符を使って何をすべきかわかりません。それらは本当に必要ですか？

基本的に、私はそれをウェブサイトで見つけることができないので、これの仕様は何ですか。

これらはすべて有効と見なされますか？

a[rel="nofollow"]
a[rel='nofollow']
a[rel=nofollow]
cssstringcss-selectors
69
Olical

HTMLおよびCSSでの引用符で囲まれていない属性値 については、この件についてより詳しく説明しました。

また、質問への回答に役立つツールも作成しました。 http://mothereff.in/unquoted-attributes

Unquoted attribute value validator

属性値が英数字である限り、通常は引用符を省略できます（ただし、いくつかの例外があります。詳細については、リンク先の記事を参照してください）。とにかく、必要に応じて引用符を追加することをお勧めします。つまり、a[href^=http://]は機能しませんが、a[href^="http://"]します。

私が言及した記事は、CSS仕様の適切な章へのリンクです。

75
Mathias Bynens

属性値は識別子または文字列である必要があります

— http://www.w3.org/TR/CSS2/selector.html#attribute-selectors

最初の2つは文字列を使用します。 3番目は識別子を使用します。

識別子（セレクターの要素名、クラス、IDを含む）には、文字[a-zA-Z0-9]とISO 10646文字U + 00A0以上、およびハイフン（-）とアンダースコア（_）のみを含めることができます。数字、2つのハイフン、またはハイフンの後に数字を続けることはできません。

— http://www.w3.org/TR/CSS2/syndata.html#value-def-identifier

文字列は二重引用符または一重引用符で記述できます。

— http://www.w3.org/TR/CSS2/syndata.html#strings

25
Quentin