CSS の基礎学習 5: Class Selector_html/css_WEB-ITnose

CSS クラス セレクターの概要

クラス セレクターを使用すると、ドキュメント要素から独立した方法でスタイルを指定できます。このセレクターは、単独で使用することも、他の要素と組み合わせて使用​​することもできます。

これらのセレクターは、ドキュメントが適切にマークアップされた後にのみ使用できるため、どちらのセレクターを使用する場合も、通常は最初に考えて計画する必要があります。特定のデザイン要素に関係なく、スタイル

を適用する最も一般的な方法は、クラス セレクターを使用することです。

2 HTML コードを変更します

クラスセレクターのスタイルを要素に関連付けるには、

でクラスを適切な値として指定する必要があります。

次の HTML コードを使用します:

<h1 class="important">This heading is very important.</h1><p class="important">This paragraph is very important.</p>

' ' s ' s ' s ' s t 。 3つのCSSクラスセレクターの構文

同じクラス名を持つすべての要素を選択する場合、クラスセレクターのワイルドカードセレクターを無視できます。同じ表示スタイル: フォントは赤です。

ブラウザによって表示される結果は次のとおりです:

4 つの結合された要素セレクター

クラス セレクターは、要素セレクターと組み合わせて使用​​できます。たとえば、段落のみが赤いテキストとして表示されるようにすることもできます。

*.important {color:red;}

E セレクターは、重要なすべての P 要素を含む Class 属性と一致しますが、他のタイプの要素は一致しません。セレクター p. important は、「クラス属性値が重要であるすべての段落」として解釈されます。 h1 要素は段落ではないため、この

ルールのセレクターは一致しないため、h1 要素は赤色のテキストになりません。ブラウザによって表示される結果は次のとおりです:

H1 要素に別のスタイルを指定したい場合は、セレクター H1 を使用できます。重要:

.important {color:red;}

は、上記の結果:

的

p.important {color:red;}

5 つの CSS マルチタイプ セレクター

上記の説明では、単語を含むクラス値の状況を処理します。 HTML では、クラス値に

スペースで区切られた単語のリストが含まれる場合があります。

と使用する と使用する使用する。

クラスが重要であるすべての要素は太字であり、クラス警告が含まれるすべての要素は斜体であると仮定します。また、クラス内に重要と警告の両方を含むすべての要素の背景も銀色です。次のように記述できます:

p.important {color:red;}h1.important {color:blue;}

ブラウザは結果を次のように表示します:

2 つのクラス セレクターをリンクすると、これらのクラス名を含む要素のみを選択できます (クラス名の順序は制限されません)。 。マルチクラス セレクターにクラス名リストにないクラス名が含まれている場合、一致は失敗します。

しかし。したがって、p 要素の

クラス属性に important と warning という単語のみが含まれている場合は、一致しません。ただし、次の要素と一致する可能性があります:

.important {color:red;}

完全なコードは次のとおりです:

<p class="important warning">This paragraph is a very important warning.</p>

ブラウザによって表示される結果は次のとおりです:

著作権表示 : この記事はブロガーによるオリジナルの記事であり、ブロガーの許可なく複製することはできません。