バックエンドプログラマーがフロントエンド (CSS) について語るレッスン 3: Selector_html/css

1. セレクター

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[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 とは異なり、属性値に対して部分文字列の一致を実行することもできます。

ルールは次のとおりです:

Type[abc^="def"][abc$=" def"] [abc*="def"]例:

Description
abc 属性値が "def" で始まるすべての要素を選択します
abc 属性値が "def" で終わるすべての要素を選択します
abc 属性値に部分文字列 "def" が含まれるすべての要素を選択します

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

ログイン後にコピー

5. 子孫セレクター:

親要素を範囲として子孫要素を選択します。

例:

h1 要素内の em 要素にのみスタイルを適用したい場合は、次のように記述できます:

h1 em {color:red;}

ログイン後にコピー

6. 子要素セレクター:

親要素を範囲として子要素を選択します。。

例:

h1 要素の子のみである強い要素を選択したい場合は、次のように記述できます:

h1 > strong {color:red;}

ログイン後にコピー

7. 隣接する兄弟セレクター:

例:

h1 要素のすぐ隣に要素を設定します。後で表示される段落のフォントは赤で、次のように記述できます:

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

ログイン後にコピー

このセレクターは次のようになります。「h1 要素の直後に表示される段落を選択します。h1 とp 要素には共通の親要素があります。」

2. セレクターの優先度

セレクターのポイントが正確であればあるほど、その優先度が高くなることがわかっています。

そのため、通常は以下のように重み付けをします（重みが大きいほど優先度が高くなります）。 ...

クラスセレクター

[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 样式；
【注：“内联样式表的权值”仅小于!important，因为它是一路ID组合出来的。】