CSS ID セレクター

[はじめに] ID セレクター ID セレクターは、特定の ID でマークされた HTML 要素に特定のスタイルを指定できます。 ID セレクターは " " で定義されます。次の 2 つの ID セレクター。最初の ID セレクターは要素の色を赤として定義でき、2 つ目は要素の色を緑として定義できます。 red {color:re

id selector

id selector can be marked with a specific HTML 要素の ID は特定のスタイルを指定します。

idセレクターは「#」で定義されます。

次の 2 つの ID セレクター。最初のものは要素の色を赤として定義でき、2 つ目は要素の色を緑として定義できます:

#red {color:red;}
#green {color :green;}

以下のHTMLコードでは、id属性がredのp要素は赤色で表示され、id属性がgreenのp要素は緑色で表示されています。

この段落は赤色です。

この段落は緑色です。

注: id 属性は、各 HTML ドキュメント内で 1 回だけ使用できます。その理由を知るには、「XHTML: Web サイトのリファクタリング」を参照してください。

ID セレクターと派生セレクター

最新のレイアウトでは、派生セレクターの作成に ID セレクターがよく使用されます。

#sidebar p {
font-style: italic;
text-align: right;
margin-top: 0.5em;
}

上記のスタイルは、ID を持つ要素内に表示される段落にのみ適用されますサイドバーのこの要素は p セルまたはテーブル セルである可能性が最も高くなりますが、テーブルまたはその他のブロック レベル要素である可能性もあります。 や などのインライン要素にすることもできますが、インライン要素 内では使用できないため、このような使用は違法です。 ;p> (理由を忘れた場合は、「XHTML: Web サイトのリファクタリング」を参照してください)。

1 つのセレクターで複数の用途

サイドバーとしてマークされた要素がドキュメント内で 1 回しか出現できない場合でも、この ID セレクターは派生セレクターとして何度も使用できます:

#sidebar p {
font -style: italic ;
text-align: right;
margin-top: 0.5em;
}

#sidebar h2 {
font-size: 1em;
font-weight:normal;
font-style: italic;
margin: 0;
line-height: 1.5;
text-align: right;
}

ここで、ページ上の他の p 要素と明らかに異なるのは、サイドバー内の p 要素が特別に処理されていることです。これはページ内の他のすべての h2 要素とは明らかに異なり、サイドバーの h2 要素も異なる特別な処理を受けます。

個別のセレクター

ID セレクターは、派生セレクターの作成に使用されない場合でも、独立して機能できます:

#sidebar {
border: 1px dotted #000;
padding: 10px;
}

このルールに従っての場合、サイドバーの ID を持つ要素にはピクセル幅の黒い点線の境界線があり、その周囲に 10 ピクセルの幅のパディングが配置されます。古いバージョンの Windows/IE ブラウザは、このセレクターが属する要素を明確に定義しない限り、このルールを無視することがあります。

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