構文:
まず、ID セレクターの前に # 記号があります (チェッカーボード番号またはポンド記号とも呼ばれます)。
次のルールを参照してください:
*#intro {font-weight:bold;}
#intro {font-weight:bold;}
構文:
次に、次の構文を使用してこれらの分類された要素にスタイルを適用します。つまり、クラス名の前にピリオド (.) があり、ワイルドカード セレクターと組み合わせます。
*.important {color:red;}
同じクラス名のすべての要素を選択するだけの場合は、悪影響を及ぼさずにクラス セレクター内のワイルドカード セレクターを無視できます。
.important {color:red;}
3. 要素セレクター:
html {color:black;}
h1 {color:blue;}
h2 {color:silver;}
4. 属性セレクター:
タイトルを含むすべての要素を赤色にしたい場合は、次のように記述できます:
*[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 とは異なり、属性値に対して部分文字列の一致を実行することもできます。 ルールは次のとおりです: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 + p {margin-top:50px;}
このセレクターは次のようになります。「h1 要素の直後に表示される段落を選択します。h1 とp 要素には共通の親要素があります。」
2. セレクターの優先度
クラスセレクター
复合选择器的权值:
例:
#example em{color:red;}
CSS 优先级法则:
A 选择器都有一个权值,权值越大越优先;
B 当权值相等时,后出现的样式表设置要优于先出现的样式表设置;
C 创作者的规则高于浏览者:即网页编写者设置的CSS 样式的优先权高于浏览器所设置的样式;
D 继承的CSS 样式不如后来指定的CSS 样式;
【注:“内联样式表的权值”仅小于!important,因为它是一路ID组合出来的。】
假设希望 h2 元素和段落都有灰色。为达到这个目的,最容易的做法是使用以下声明:
h2, p {color:gray;}
要素セレクター | |
属性セレクター | |