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

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组合出来的。】

三、选择器分组：

假设希望 h2 元素和段落都有灰色。为达到这个目的，最容易的做法是使用以下声明：

h2, p {color:gray;}

提示：通过分组，创作者可以将某些类型的样式“压缩”在一起，这样就可以得到更简洁的样式表。

	要素セレクター
	属性セレクター