CSS ID 選択子詳細

ID 選択子は、ドキュメントの要素に関連なくて样式を指定することができます。

CSS ID 選択子

ある意味では、ID 選択子はクラス選択子に似ていますが、いくつかの重要な違いがあります。

文法

まず、ID 選択子の前に # ズ号があります - これを盤上の号または井号とも言います。

以下のルールを見てください：

*#intro {font-weight:bold;}

クラス選択子と同様に、ID 選択子ではワイルドカード選択子を無視できます。前の例も以下のように書けます：

#intro {font-weight:bold;}

この選択子の効果は同じです。

第二の区別は、ID 選択子が class 属性の値を参照するのではなく、確かに id 属性の値を参照することです。

以下は実際の ID 選択子の例です：

<p id="intro"<p>This is a paragraph of introduction.</p>

自分で試してみてください

クラス選択子か ID 選択子か？

クラス選択子の章で説明したように、任意の要素にクラスを指定できます。前章でクラス名 important が p と h1 要素に適用されましたが、他の要素にも適用できます。

区別 1：ドキュメント内で一度だけ使用可能

クラスとは異なり、HTML ドキュメント内で ID 選択子は一度だけ使用され、しかも一度だけです。

区別 2：ID ワードリストを使用できない

クラス選択子とは異なり、ID 選択子は組み合わせて使用できません。なぜなら、ID 属性にはスペースで区切られた単語リストが許可されていないからです。

区別 3：ID にはより多くの意味が含まれる

クラスと同様に、ID を独立して要素を選択できます。ある場合、特定の ID 値がドキュメントに存在することを知っていますが、どの要素に現れるかは知りません。したがって、独立した ID 选择器を宣言したい場合があります。例えば、特定のドキュメントに ID 値が mostImportant の要素があることを知っていますが、それは段落、短文、リストアイテム、または小節のタイトルであるかどうかはわかりません。ただし、各ドキュメントには重要な内容が存在し、どの要素にでも存在し、しかも一度だけ存在するということがわかります。この場合、以下のようにルールを書くことができます：

#mostImportant {color:red; background:yellow;}

このルールは以下の各要素と一致します（これらの要素は同じ ID 値を持っているため、同じドキュメント内で同時に存在することができません）：

<h1 id="mostImportant">これは重要です！<h1>
<em id="mostImportant">これは重要です！
<ul> id="mostImportant"<ul>This is important!</ul>

自分で試してみましょう：

大文字と小文字の区別

注意してください、クラス選択子と ID 選択子は大文字と小文字を区別することがあります。これは文書の言語に依存します。HTML と XHTML ではクラスと ID 値は大文字と小文字を区別しますので、クラスと ID 値は文書内の対応する値と一致する必要があります。

したがって、以下の CSS と HTML では、要素は太字にならない：

#intro {font-weight:bold;}
<p id="Intro"<p>This is a paragraph of introduction.</p>

アルファベットの i の大文字と小文字が異なるため、選択子は上記の要素に一致しません。