クラス セレクターを使用すると、ドキュメント要素から独立してスタイルを指定できます
例: .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 のフォント サイズ、および独自の斜体が変更されていることがわかります。これがアプリケーションです。マルチカテゴリセレクターの一部。