CSS でクラス セレクターを使用する方法の詳細な例

CSS では、クラスセレクターはクラス名の前にドットを追加するもので、複数のドットを追加する代わりに、. important.urgent の形式になります。

クラス セレクター
CSS では、クラス セレクターはピリオドで表示されます:

    .center {text-align: center}

上の例では、中心クラスを持つすべての HTML 要素が中央に配置されます。
以下の HTML コードでは、h1 要素と p 要素の両方にセンター クラスがあります。これは、どちらも「.center」セレクターのルールを尊重することを意味します。

   <h1 class="center"> 
    This heading will be center-aligned 
    </h1> 
    <p class="center"> 
    This paragraph will also be center-aligned. 
    </p>

注: クラス名の最初の文字として数字を使用することはできません。 Mozilla や Firefox では動作しません。
id と同様に、class も派生セレクターとして使用できます:

 .fancy td { 
        color: #f60; 
        background: #666; 
        }

上の例では、クラス名 fancy を持つ大きな要素内のテーブル セルには、灰色の背景にオレンジ色のテキストが表示されます。 (fancy という名前の大きな要素は table または p である可能性があります)
要素はクラスに基づいて選択することもできます:

    td.fancy { 
        color: #f60; 
        background: #666; 
        }

上の例では、クラス名 fancy を持つテーブルのセルは灰色の背景がオレンジ色になります。

   <td class="fancy">

マルチクラスセレクター

1. HTML では、クラス値にスペースで区切られた単語のリストが含まれる場合があります。たとえば、特定の要素を重要であると同時に警告としてマークしたい場合は、次のように記述できます (これら 2 つの単語の順序は重要ではなく、警告を重要と書くことができます):

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

クラスが重要であると仮定しますクラスのすべての要素は太字で表示され、警告クラスのすべての要素は斜体で表示されます。また、クラスに重要と警告の両方が含まれるすべての要素の背景も銀色になります。

.important {font-weight:bold;}
.warning {font-weight:italic;}
.important.warning {background:silver;}

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

.important.urgent {background:silver;}

予想どおり、このセレクターは、クラス属性に重要および緊急という単語が含まれる p 要素のみと一致します。したがって、p 要素の class 属性に「重要」と「警告」という単語のみが含まれている場合は、一致しません。ただし、次の要素と一致します:

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

以上がCSS でクラス セレクターを使用する方法の詳細な例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。