CSSは大文字と小文字を区別しないことをどこでも読み続けていますが、このセレクターがあります
.holiday-type.Selfcatering
このようにHTMLで使用すると、ピックアップされます
<div class="holiday-type Selfcatering">
上記のセレクターをこのように変更すると
.holiday-type.SelfCatering
それからスタイルは拾われません。
誰かが嘘をついています。
CSSは大文字と小文字を区別しないことをどこでも読み続けていますが、このセレクターがあります
.holiday-type.Selfcatering
このようにHTMLで使用すると、ピックアップされます
<div class="holiday-type Selfcatering">
上記のセレクターをこのように変更すると
.holiday-type.SelfCatering
それからスタイルは拾われません。
誰かが嘘をついています。
通常、CSS セレクターは大文字と小文字を区別しません。これには、クラスおよび ID セレクターが含まれます。
ただし、HTML クラス名は大文字と小文字が区別されるため (属性の定義を参照)、2 番目の例では不一致が発生しています。これはHTML5でも変更されていません。1
これは、セレクターの大文字と小文字の区別がドキュメント言語の内容に依存するためです。
セレクターの制御下にない部分を除いて、すべてのセレクター構文は ASCII 範囲内で大文字と小文字を区別しません (つまり、[az] と [AZ] は同等です)。セレクタ内のドキュメント言語要素名、属性名、および属性値の大文字と小文字の区別は、ドキュメント言語によって異なります。
Selfcatering
そのため、クラスはあるがクラスがないHTML 要素が与えられた場合SelfCatering
、セレクター.Selfcatering
と[class~="Selfcatering"]
は一致しますが 、セレクター.SelfCatering
とは一致し[class~="SelfCatering"]
ません。2
ドキュメント タイプでクラス名が大文字と小文字を区別しないように定義されている場合は、関係なく一致します。
1 すべてのブラウザの互換モードでは、クラスと ID は大文字と小文字が区別されません。これは、大文字と小文字が一致しないセレクターが常に一致することを意味します。この動作は、従来の理由からすべてのブラウザーで一貫しており、この記事で説明されています。
2 価値のあることとして、セレクター レベル 4[class~="Selfcatering" i]
には、 orを使用して属性値の大文字と小文字を区別しない検索を強制するための提案された構文が含まれています[class~="SelfCatering" i]
。どちらのセレクターも、HTML または XHTML 要素を、Selfcatering
クラスまたはクラスのいずれかSelfCatering
(またはもちろん両方) と一致させます。ただし、クラスまたは ID セレクターにはそのような構文はありません (まだ?)。これはおそらく、通常の属性セレクター (関連するセマンティクスがない) とは異なるセマンティクスを持っているか、使用可能な構文を思いつくのが難しいためです。
おそらく嘘ではありませんが、明確にする必要があります。
実際の css 自体は大文字と小文字を区別しません。
例えば
wiDth:100%;
ただし、名前は一意の識別子にするために大文字と小文字を区別する必要があります。
それが役立つことを願っています。
quirks モードでは、CSS クラスと ID 名を使用する場合、すべてのブラウザーが大文字と小文字を区別しないように動作します。
quirks モードでは、CSS クラス名と ID 名は大文字と小文字が区別されません。標準モードでは、大文字と小文字が区別されます。(これは getElementsByClassName にも適用されます。)詳細を参照してください。
以下のような間違った Doctype を使用すると、ブラウザーが quirks モードになることがあります。
<!DOCTYPE html PUBLIC>
<!DOCTYPE html anytext>
標準のDoctypeを使用する必要があります
HTML5
<!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 トランジショナル
<!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 厳格
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML 1.0 トランジショナル
<!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 クラスまたは ID 名が大文字と小文字を区別しない場合は、doctype を確認してください。