web-dev-qa-db-ja.com

CSSセレクターのクラス名では大文字と小文字が区別されますか？

私はCSSが大文字と小文字を区別しないことをどこでも読んでいますが、私はこのセレクタを持っています

.holiday-type.Selfcatering

このようにHTMLで使用すると、取得されます

<div class="holiday-type Selfcatering">

上記のセレクターをこのように変更すると

.holiday-type.SelfCatering

その後、スタイルは選択されません。

誰かが嘘をついています。

htmlcsscss-selectors
213
Sachin Kainth

CSSセレクターは通常、大文字と小文字を区別しません。これには、クラスおよびIDセレクターが含まれます。

しかし、 HTMLクラス名are大文字と小文字を区別します （属性の定義を参照）、それが2番目の例で不一致の原因となっています。これは HTML5 で変更されていません。1

これは、セレクタの大文字と小文字が区別されるためです ドキュメント言語の記述に依存 ：

セレクターの制御下にない部分を除き、すべてのセレクター構文はASCII範囲内で大文字と小文字を区別しません（つまり、[a-z]と[A-Z]は同等です）。セレクタ内のドキュメント言語要素名、属性名、および属性値の大文字と小文字の区別は、ドキュメント言語に依存します。

したがって、SelfcateringクラスはあるがSelfCateringクラスはないHTML要素が与えられた場合、セレクター.Selfcateringと[class~="Selfcatering"]は一致しますが、セレクター.SelfCateringと[class~="SelfCatering"]はしません。2

ドキュメントタイプで大文字と小文字を区別しないクラス名が定義されている場合は、関係なく一致します。

1すべてのブラウザーの互換モードでは、クラスとIDは大文字と小文字を区別しません。これは、大文字と小文字が一致しないセレクターが常に一致することを意味します。この動作は、従来の理由によりすべてのブラウザーで一貫しており、 この記事 で説明されています。

2価値のあるものとして、 セレクターレベル4 には、[class~="Selfcatering" i]または[class~="SelfCatering" i]を使用して属性値の大文字と小文字を区別しない検索を強制するための提案された構文が含まれています。両方のセレクターは、HTML要素またはXHTML要素をSelfcateringクラスまたはSelfCateringクラス（または、もちろん両方）と一致させます。ただし、クラスまたはIDセレクターには（そのような構文はありません）（おそらく、通常の属性セレクター（noセマンティクスが関連付けられている）とは異なるセマンティクスを持つためですまたは使用可能な構文を見つけるのが難しいためです。

225
BoltClock

おそらく嘘ではないが、明確にする必要がある。

実際のcss自体は大文字と小文字を区別しません。

例えば

wiDth:100%;

ただし、名前は、一意の識別子になるように大文字と小文字を区別する必要があります。

それが役に立てば幸いです。

59
Jack Stone

互換モードでは、CSS classおよびid namesを使用する場合、すべてのブラウザーはcase-insensitiveのように動作します。

互換モードでは、CSSクラスとID名は大文字と小文字を区別しません。標準モードでは、大文字と小文字が区別されます。 （これはgetElementsByClassNameにも適用されます。） 続きを読む...

以下のような間違ったDoctypeがある場合、ブラウザが奇抜なモードになることがあります。

<!DOCTYPE html PUBLIC>
<!DOCTYPE html anytext>

標準のdoctypeを使用する必要があります

HTML 5

<!DOCTYPE html>

HTML 4.01厳格

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML 4.01 Transitional

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

HTML 4.01フレームセット

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

XHTML 1.0 Strict

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

XHTML 1.0 Transitional

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML 1.0フレームセット

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

XHTML 1.1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

CSS classまたはid namesがcase insensitive動作する場合は、Doctypeを確認してください。

14
Mohamad Shiralizadeh