クラスセレクター

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

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

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

html ファイル:

<div class="div">
    php中文网
</div>

css ファイル:

.div{color: cadetblue;
}

この方法で、カスタマイズされた効果を実現できます:

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

<h1 class="div">php中文网</h1>

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

h1.div{color: cadetblue;
}

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

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

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

<p class="p1">php中文网</p>
<p class="p2">php中文网</p>
<p class="p3">php中文网</p>

CSS ファイルには設定を変更するためのセレクターがありません。地色は青と黒、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中文网</p>

以下は結果の画像です:

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