ホームページ > ウェブフロントエンド > CSSチュートリアル > CSS でクラスと ID を使用する場合

CSS でクラスと ID を使用する場合

青灯夜游
リリース: 2023-01-04 09:38:55
オリジナル
3300 人が閲覧しました

CSS スタイルが複数の要素に適用される場合は、class を使用して定義します。CSS スタイルが 1 つの要素のみに適用される場合は、id を使用して定義します。理由: ID は繰り返し使用できず、1 回しか使用できません。1 つの ID は 1 つのラベル要素にのみ使用できます。クラスは繰り返し使用でき、同じクラスを複数のラベル要素に定義できます。

CSS でクラスと ID を使用する場合

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

チュートリアルの推奨事項: css ビデオ チュートリアル

CSS のセレクターに加えて、

などの HTML 定義済みタグを選択できます。 、

。ユーザー定義の ID またはクラスを選択することもできます。 id と class の主な違いは、id は繰り返すことができず、一度しか使用できないこと、1 つの ID は 1 つのラベルに対してのみ使用できることです。クラスは再利用でき、同じクラスを複数のタグに定義できます。実は、idとclassの違いは名前からも分かりますが、idは識別子、classはクラスです。

では、いつ ID を使用し、いつクラスを使用するのでしょうか?

  • CSS スタイルが複数の要素に使用される場合は、クラスを使用して定義します。

  • CSS スタイルを 1 つの要素のみに適用する場合は、id を使用して定義します。

たとえば、ナビゲーション バー。各ページにトップ ナビゲーション バーが 1 つだけある場合は、ID を使用してそれを定義できます。

<nav id="nav"></nav>
// 或者
<div id="nav"></div>
ログイン後にコピー

たとえば、次のようになります。製品リストも同じスタイルです。クラスを使用して

<ul id="list">
    <li class="list-item">1</li>
    <li class="list-item">2</li>
    <li class="list-item">3</li>
</ul>
ログイン後にコピー

を定義できます。プログラミング関連の知識の詳細については、プログラミング教育をご覧ください。 !

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

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート