ホームページ > ウェブフロントエンド > CSSチュートリアル > HTML要素にIDセレクターを使用するかクラスセレクターを使用するかを決定するにはどうすればよいですか? (例)

HTML要素にIDセレクターを使用するかクラスセレクターを使用するかを決定するにはどうすればよいですか? (例)

藏色散人
リリース: 2018-08-11 15:27:11
オリジナル
4554 人が閲覧しました

ウェブサイトを構築するときは、ウェブサイトのコンテンツのスタイルを設定する必要があります。では、HTML 要素に CSS スタイルを設定したい場合は、どこから始めればよいのでしょうか?ここでは、HTML 要素に ID セレクターとクラス セレクターを設定する必要があります。初心者の友人の中には、CSS クラスの使い方を尋ねる人もいるかもしれません。 div タグには id または class を使用する必要がありますか?

この記事では、CSSクラスセレクターIDとクラスの使い方と違いを紹介します。 idとclassについての分かりやすい説明が皆様のお役に立てれば幸いです。

1. CSS クラスセレクター ID コードの使用例は次のとおりです:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        #p1
        {
            text-align:center;
            color:red;
        }
    </style>
</head>
<body>
<p id="p1">css定义id选择器示例</p>
<p>这一段文字就不会受影响。</p>
</body>
</html>
ログイン後にコピー

効果は次のとおりです:

HTML要素にIDセレクターを使用するかクラスセレクターを使用するかを決定するにはどうすればよいですか? (例)

2. CSS クラスセレクターのクラスコードの使用例は次のとおりです:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        .p1
        {
            text-align:center;
            color: #3262ff;
        }
    </style>
</head>
<body>
<p class="p1">css定义class选择器示例</p>
<p>这一段文字就不会受影响。</p>
</body>
</html>
ログイン後にコピー

効果は次のとおりです:

HTML要素にIDセレクターを使用するかクラスセレクターを使用するかを決定するにはどうすればよいですか? (例)

3. id と class の組み合わせは、上記の 2 つのメソッドを組み合わせただけです。

ここで注意すべき点は次のとおりです:

ID には先頭に「#」が付いています。ID はページごとに 1 回のみ使用できます。

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

CLASSは「.」クラスを使用して複数回参照できます。

クラスセレクターは、要素のグループのスタイルを記述するために使用されます。クラスは複数の要素で使用できます。

したがって、この記事の css .class#id の 2 つのセレクターの紹介を通じて、初心者が class と id のどちらを使用するか迷ったときに役立つことを願っています。






以上がHTML要素にIDセレクターを使用するかクラスセレクターを使用するかを決定するにはどうすればよいですか? (例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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