CSSクラスとIDセレクターの使用方法

CSS では、クラス セレクターは、ピリオドで表される指定されたクラス (クラス) の要素を選択するために使用され、構文は「.specified class {style 属性: style 属性値;}」です。 ID セレクターは、特定の ID でマークされた HTML 要素の特定のスタイルを指定するために使用されます。「#」を使用して定義され、構文は「#特定の ID 値 {特定の属性: 特定の属性値;}」です。

このチュートリアルの動作環境: Windows 10 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。

cssクラスセレクターとIDセレクターの使い方

クラスセレクター

.クラスセレクター選択バンド があります。指定されたクラスの要素。

CSS では、クラス セレクターはピリオド付きで表示されます。

.center {text-align: center}

上の例では、中心クラスを持つすべての HTML 要素が中央に配置されます。

以下の HTML コードでは、h1 要素と p 要素の両方にセンター クラスがあります。これは、両方が「.center」セレクターのルールに従うことを意味します。

<h1 class="center">
This heading will be center-aligned
</h1>
<p class="center">
This paragraph will also be center-aligned.
</p>

注: クラス名の最初の文字として数字を使用することはできません。 Mozilla や Firefox では動作しません。

id ​​と同様に、class も派生セレクターとして使用できます:

.fancy td {
color: #f60;
background: #666;
}

上の例では、クラス名 fancy を持つ大きな要素内のテーブル セルは、背景が灰色のオレンジ色のテキストになります。表示されています。 (fancy という名前の大きな要素は、table または div である可能性があります)

要素はクラスに基づいて選択することもできます:

td.fancy {
color: #f60;
background: #666;
}

上の例では、クラス名の fancy テーブルのセルは次のようになります。灰色の背景にオレンジ色。

<td class="fancy">

クラス fancy は、テーブル要素に何度でも割り当てることができます。ファンシーでマークされたセルは、背景がグレーのオレンジ色になります。 fancy という名前のクラスが割り当てられていないセルは、このルールの影響を受けません。また、ファンシー クラスの段落はオレンジ色の背景ではなく、ファンシーとしてマークされた他の要素はこのルールの影響を受けないことにも注意してください。これはすべてこのルールの記述方法によるもので、効果はファンシーとしてマークされたテーブル セル (つまり、td 要素を使用してファンシー クラスを選択する) に限定されます。

id ​​セレクター

ID セレクターは、特定の ID でマークされた HTML 要素の特定のスタイルを指定できます。

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

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

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

次の HTML code、id属性 id属性が緑色のp要素は赤色で表示され、id属性が緑色のp要素は緑色で表示されます。

<p id="red">这个段落是红色。</p>
<p id="green">这个段落是绿色。</p>

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

id ​​セレクターと派生セレクター

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

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

上記のスタイルは、ID がsidebar である要素内に表示される段落にのみ適用されます。この要素は div または table セルである可能性が最も高くなりますが、table またはその他のブロック レベル要素である可能性もあります。 や などのインライン要素にすることもできますが、インライン要素 Embed < 内では使用できないため、そのような使用は違法です。 ;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 ブラウザは、このセレクターが属する要素を明確に定義しない限り、このルールを無視する可能性があります:

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

(学習ビデオ共有: css ビデオ チュートリアル 、html ビデオチュートリアル＃＃＃）＃＃＃

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