クラス セレクターを使用すると、ドキュメント要素から獨立してスタイルを指定できます

例: .class{} (ドットで始まることに注意してください。これはクラス セレクターの記號であり、ドットの後には屬性名が入ります。中括弧 これが具體的な設(shè)定です)

簡単な例を見てみましょう:

html ファイル:

<div class="div">
    php中文網(wǎng)
</div>

css ファイル:

.div{color: cadetblue;
}

この方法で、カスタマイズされた効果を?qū)g現(xiàn)できます:

セレクターは、要素セレクターと組み合わせて使用??されます。以下にもう 1 つ追加します:

<h1 class="div">php中文網(wǎng)</h1>

次に、変更します。 CSS ファイルは次のようになります:

h1.div{color: cadetblue;
}

この方法 クラス セレクターの前に要素の説明を追加した後、この .div は h1 でのみ機能します。

具體的な効果を見てみましょう:

次に説明するのは、マルチクラス セレクターです: .class.class{} これは今まで見たことがありません。書きながら感じてみましょう: HTML ファイルにはいくつかの p フィールドがリストされているので、比較するのは簡単です:

<p class="p1">php中文網(wǎng)</p>
<p class="p2">php中文網(wǎng)</p>
<p class="p3">php中文網(wǎng)</p>

CSS ファイルには設(shè)定を変更するためのセレクターがありません。地色は青と黒、2 番目のフォント サイズは 20 ピクセル、3 番目のフォント スタイルは斜體です:

.p1{    color: cadetblue;
}.p2{    font-size: 20px;
}.p3{    font-style: italic;
}

以下は効果のスクリーンショットです:

ここで、マルチカテゴリセレクターを使用します:

これです。CSSファイルのp3を.p1.p2に変更し、HTMLで引用するときに3番目のpタグクラスを変更します: css:

.p1.p2{    font-style: italic;
}

html:

<p class="p1 p2">php中文網(wǎng)</p>

以下は結(jié)果の畫像です:

ここでは、3 番目の段落に p1 の色、p2 のフォント サイズ、および獨自の斜體が変更されていることがわかります。これがアプリケーションです。マルチカテゴリセレクターの一部。