1. タイプ セレクター タイプ セレクターとは何ですか? Web ページ内の既存のタグ タイプを名前として取る行文字を指します。 body は、div、p、span など、Web ページ内のタグの種類です。
次のように:
本体 {}
ディビジョン{}
p{}
スパン{}
2. グループセレクター
XHMTL オブジェクトの場合、同じスタイルを同時にグループに割り当てることができます。
セレクターはカンマで区切られます。この方法で記述することの利点は、同じスタイルを 1 回記述するだけで済むため、コード量が削減され、CSS コード構造が改善されることです。
使用する際は「カンマ」が中国語全角モードではなく半角モードになることに注意してください。
次のように:
h1、h2、h6、p、スパン
{
フォントサイズ:12px;
色:#FF0000;
フォントファミリー: arial;
}
3. 選択方法が役割を果たすように、オブジェクト内のサブオブジェクトのスタイルを指定するセレクターが含まれています。
このスタイル設定は、このオブジェクトのサブオブジェクト ラベルに対してのみ有効であることに注意してください。このスタイル設定は、単独で存在する、またはこのオブジェクトの外部にある他のサブオブジェクトには適用されません。
この利点は、過剰な ID とクラスの設定を回避し、必要な要素を直接定義できることです。
次のように:
h2 スパン
{
色: 赤;
}
次のように：
ボディ h1 スパン ストロング
{
フォントの太さ:太字;
}
4. id セレクターは、
DOM ドキュメント オブジェクト モデルの原理に基づいて表示されるセレクターです。XHTML ファイルの場合、各タグには id="" の形式で名前を割り当てることができますが、注意が必要です。 XHTML ファイル ID は一意であり、繰り返すことはできません。
div CSS レイアウト Web ページでは、頭部にはヘッダー、下部にはフッターなど、さまざまな目的に応じて名前を付けることができます。
XHTML は次のとおりです:
。
{
フォントサイズ:14px;
行の高さ:120%;
}
5. クラスセレクター
実際、id は XHTML タグの拡張であり、class は複数の SHTML タグの組み合わせです。class の直訳はクラスまたはカテゴリを意味します。
XHTML タグの場合は、名前の割り当てに class="" を使用します。 ID とは異なり、クラスは同じスタイルの複数の要素をクラスとして直接定義できます。
クラスを使用する利点は、CSS コードの再利用性を反映しており、それぞれにスタイル コードを記述しなくても、スタイルを使用して定義できます。
XHTML は次のとおりです:
.he
{
マージン:10px;
背景色:赤;
}
6. タグ固有のセレクター
ID とクラスを同時に使用し、タグ セレクターも同時に使用したい場合は、次のメソッドを使用できます:
h1#content {}
/*コンテンツとして ID を持つすべての h1 タグを表します*/
h1.p1 {}
/*クラス p1 のすべての h1 タグを示します*/
ラベル固有のセレクターの精度は、ラベル セレクターと ID/クラス セレクターの間であり、一般的に使用されるセレクターの 1 つです。
7. 組み合わせセレクター
上記のセレクターはすべて組み合わせて使用します。次のように:
h1 .p1 {}
/*h1 の下にクラス p1 を持つすべてのタグを示します*/
#コンテンツ h1 {}
ID コンテンツを持つタグの下にあるすべての h1 タグを表します
h1 .p1,#content h1 {}
/*クラス p1 を持つ h1 の下にあるすべての h1 タグと、コンテンツ ID を持つタグの下にあるすべての h1 タグを表します*/
h1#コンテンツ h2{}
/*コンテンツとして ID を持つ h1 タグの下の h2 タグ*/
CSS セレクターは非常に自由かつ柔軟で、ページのニーズに応じてさまざまなセレクターを使用して、CSS ファイルを可能な限り構造化し、最適化できます。