バックエンドコード農談フロントエンド(CSS編)第三課:セレクタ

一、セレクタ

1、IDセレクタ：

構文:まず、IDセレクタの前に#番号があります.碁盤番号または井戸番号とも呼ばれます.次のルールを参照してください.

*#intro {font-weight:bold;}

クラスセレクタと同様に、IDセレクタではワイルドセレクタを無視できます.前の例は、次のように書くこともできます.

#intro {font-weight:bold;}

このセレクタの効果は同じです.

2、クラスセレクタ:

構文:次に、クラス名にポイント(.)がある、分類された要素にスタイルを適用します.次に、ワイルド・セレクタを組み合わせます.

*.important {color:red;}

同じクラス名の要素をすべて選択する場合は、クラス・セレクタでワイルド・セレクタを無視できます.これには悪い影響はありません.

.important {color:red;}

3、要素選択:

最も一般的なCSSセレクタは要素セレクタです.すなわち、ドキュメントの要素は最も基本的なセレクタです.例:

html {color:black;}

h1 {color:blue;}

h2 {color:silver;}

4、属性選択器：

属性セレクタは、要素の属性および属性値に基づいて要素を選択できます.例1タイトルを含むすべての要素を赤にする場合は、次のように書きます.

*[title] {color:red;}

例2
上記と同様に、hrefプロパティのあるアンカー(a要素)にのみスタイルを適用できます.

a[href] {color:red;}

例3
複数のアトリビュートに基づいて選択することもできます.アトリビュートセレクタをリンクするだけでいいです.
たとえば、hrefとtitleの両方の属性を持つHTMLハイパーリンクのテキストを赤に設定するには、次のように書くことができます.

a[href][title] {color:red;}

例4
特定の属性を持つ要素を選択するだけでなく、選択範囲をさらに縮小し、特定の属性値を持つ要素のみを選択することもできます.
たとえば、Webサーバ上の特定のドキュメントへのハイパーリンクを赤にするとします.

a[href="http://www.w3school.com.cn/about_us.asp"] {color: red;}

例5
例4とは異なり,属性値をサブストリングマッチングすることもできる.
ルールは次のとおりです.
を選択します.
説明
[abc^="def"]
abc属性値が「def」で始まるすべての要素を選択します.
[abc$="def"]
abc属性値が「def」で終わるすべての要素を選択します.
[abc*="def"]
abc属性値にサブ列「def」を含むすべての要素を選択
例:

a[href*="w3school.com.cn"] {color: red;}

5、子孫セレクタ:

親要素の範囲で子孫要素を選択します.たとえば、h 1要素のem要素にのみスタイルを適用する場合は、次のように書くことができます.

h1 em {color:red;}

6、サブエレメントセレクタ:

親要素の範囲でサブ要素を選択します.たとえば、h 1要素サブ要素としてのみ使用するstrong要素を選択する場合は、次のように書きます.

h1 > strong {color:red;}

7、隣接兄弟選択器：

たとえば、h 1要素の直後に表示される段落フォントを赤に設定する場合は、次のように書くことができます.

h1 + p {margin-top:50px;}

このセレクタは、「h 1要素の直後に現れる段落を選択し、h 1要素とp要素が共通の親要素を持つ」と読みます.

二、セレクタの優先度

セレクタが正確であればあるほど、優先度が高くなることを知っています.したがって、通常、重み値は以下のように割り当てられる(重み値が大きいほど優先度が高い).
セレクタのタイプ
ウェイト値
!important
[1,0,0,0]
IDセレクタ
[0,1,0,0]
クラスセレクタ
[0,0,1,0]
エレメントセレクタ
[0,0,0,1]
属性セレクタ
[0,0,1,0]
複合セレクタの重み付け:例:

#example  em{color:red;} 

重み=[0,1,0,1]
CSS優先度法則:Aセレクタには重み値があり、重み値が大きいほど優先される.B重み値が等しい場合、後に現れるスタイルシートの設定は、先に現れるスタイルシートの設定よりも優れている.C作成者のルールは閲覧者より高い:すなわち、ウェブページ作成者が設定したCSSスタイルの優先度がブラウザが設定したスタイルより高い;D継承されたCSSスタイルは、後に指定されたCSSスタイルに及ばない.【注意:インラインスタイルシートの重み値は、IDが結合されているため、importantよりも小さいです.】

三、セレクタグループ：

h 2要素と段落をグレーにしたいとします.この目的を達成するために、最も簡単な方法は以下の声明を使用することです.

h2, p {color:gray;}

ヒント:グループ化することで、作成者はいくつかのタイプのスタイルを「圧縮」することができ、より簡潔なスタイルシートを得ることができます.