ワイルドカード セレクター
| *{属性: 値;} |
ユニバーサル セレクターは、ページ上のすべての要素を選択し、* を使用してスタイルを適用できます。 。 IE6 はサポートしていないため、大規模な Web サイトでは負荷が増加するため、使用はお勧めしません。 |
*{幅: 300px;} |
|
タグセレクター
| タグ名{属性: 値;} |
タグ選択コンバータ、対応する HTML タグと一致します。 |
h1{色: 赤;} |
|
クラス セレクター
| .class 属性値{属性: 値;} |
クラスselector は、指定されたクラス属性値を持つ要素のスタイルを設定します。 |
.box{color: red;} |
|
ID セレクター
| #id 属性値{attribute: value;} |
ID セレクター。HTML ドキュメントでは、ID セレクターは 1 回のみ使用されます。 ID セレクターは # で定義されます。 |
#box{color: red;} |
|
結合要素セレクター
| タグ名.class 属性値{attribute: value} | セレクターは、タグ名に指定された .class 属性値が含まれる要素に基づきます。 |
p.box {color:red;} |
|
複数クラスセレクター
| .class 属性値.class 属性値 {attribute: value; } |
2 つのクラス セレクターをリンクすると、これらのクラス名の両方を含む要素のみを選択できます (クラス名の順序は制限されません)。注: IE7 より前のバージョンでは、さまざまなプラットフォーム上の Internet Explorer がマルチタイプ セレクターを正しく処理できませんでした。 |
.box.box1{色:赤;} |
|
ワイルドカード セレクター
- 次に、ユニバーサル セレクターの実践に入りましょう。作成者は埋め込みフォームを使用して、
HTML ページに h1 を挿入します。タグと p タグのフォントの色は赤に設定されます。
コード ブロック
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>通配符选择器</title>
<style>
* {
color: red;
}
</style>
</head>
<body>
<h1>PHP中文网</h1>
<p>PHP中文网</p>
</body>
</html>
タグ セレクター
- 次に、タグ セレクターの実践に入りましょう。作成者は埋め込みフォームを使用して、
HTML ページに h1 を挿入します。タグと p タグのフォントの色は赤に設定されます。
コード ブロック
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>标签选择器</title>
<style>
h1 {
color: red;
}
</style>
</head>
<body>
<h1>PHP中文网</h1>
<p>PHP中文网</p>
</body>
</html>
nbsp;html>
<meta>
<title>标签选择器</title>
<style>
h1 {
color: red;
}
</style>
<h1>成功不是击败别人，而是改变自己。</h1>
<h1>PHP中文网</h1>
<p>PHP中文网</p>
nbsp;html>
<meta>
<title>标签选择器</title>
<style>
h1 {
color: red;
}
p {
color: red;
}
</style>
<h1>成功不是击败别人，而是改变自己。</h1>
<h1>PHP中文网</h1>
<p>PHP中文网</p>
結果グラフ
クラス セレクター
- 次に、クラス セレクターの実践に入りましょう。作成者は、クラスの属性値を使用して埋め込みフォームの
.box を完成させますHTML ページの h1 タグと p タグのフォントの色は赤に設定されます。
- まず、
HTML ページの最初の h1 タグのフォントの色を赤に設定します。
コード ブロック
nbsp;html>
<meta>
<title>类选择器</title>
<style>
.box {
color: red;
}
</style>
<h1>成功不是击败别人，而是改变自己。</h1>
<h1>PHP中文网</h1>
<p>PHP中文网</p>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>类选择器</title>
<style>
.box{
color:red;
}
</style>
</head>
<body>
<h1 class="box">成功不是击败别人，而是改变自己。</h1>
<h1 class="box">PHP中文网</h1>
<p class="box">PHP中文网</p>
</body>
</html>結果グラフ
Id セレクター
- 次に、
id セレクターの実践に入りましょう。作成者は、埋め込みフォームで id 属性値を # として使用します。 #box では、HTML ページの h1 タグのフォントの色を赤に設定します。
- コード ブロック
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>id选择器</title>
<style>
#box {
color: red;
}
</style>
</head>
<body>
<h1 id="box">成功不是击败别人，而是改变自己。</h1>
</body>
</html>
結合要素セレクター
nbsp;html>
<meta>
<title>结合元素选择器</title>
<style>
h2.box {
color: red;
}
</style>
<h2>成功不是击败别人，而是改变自己。</h2>
<span>成功不是击败别人，而是改变自己。</span>
マルチカテゴリ セレクター
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>多类选择器</title>
<style>
.box.box1 {
color: red;
}
</style>
</head>
<body>
<h2 class="box1 box">成功不是击败别人，而是改变自己。</h2>
<span class="box box1">成功不是击败别人，而是改变自己。</span>
<h2 class="box1 ">PHP中文网</h2>
<span class="box">PHP中文网</span>
</body>
</html>
注: マルチクラス セレクターの実装原理は次のように説明されます: まず、class 属性値はスペースで区切られた複数の値に設定できます。例: If a class 属性値には .box と .box1 が含まれており、それぞれのスタイルを設定します。2 つのクラス セレクターをリンクすると、これらのクラス名の両方を含む要素のみを選択できます (クラス名の順序は制限されません)。マルチクラス セレクターにクラス名リストにないクラス名が含まれている場合、一致は失敗します。ここで、個々の class 属性値 .box と .box1 はレンダリングされないことがわかります。
(学習ビデオ共有: css ビデオ チュートリアル)
