CSS のグループ化とネストされたセレクター
セレクターのグループ化
h2 要素と段落の両方を灰色にしたいとします。この目的を達成する最も簡単な方法は、次の宣言を使用することです:
h2, p {color:gray;}
h2 セレクターと p セレクターをルールの左側に配置し、カンマで区切ります。ルールを定義します。右側のスタイル (color:gray;) は、これら 2 つのセレクターによって参照される要素に適用されます。カンマは、ルールに 2 つの異なるセレクターが含まれていることをブラウザーに伝えます。このカンマがないと、ルールの意味がまったく異なります。子孫セレクターを参照してください。
セレクターは好きなだけグループ化できます。これには制限はありません。
たとえば、多くの要素を灰色にしたい場合は、次のようなルールを使用できます:
body, h2, p, table, th, td, pre, Strong, em {color:gray;}
ヒント: グループ化すると、作成者は特定の種類のスタイルを「絞り込む」ことができ、より簡潔なスタイル シートが得られます。
次の 2 つのルール セットは同じ結果をもたらしますが、どちらの方が書きやすいかは明らかです。
/* グループ化なし */
h1 {color:blue;} h2 {color:blue } h3 {color; :blue;} h4 {color:blue;} h5 {color:blue;} h6 {color:blue;}
/* グループ化 */
h1, h2, h3, h4, h5, h6 { color: blue; }
例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>实例</title>
<style type="text/css">
h1, h2, h3, h4, h5, p{
color:purple;
font-size:15px;
}
h2.special, .special, #one{
text-decoration:underline;
}
</style>
</head>
<body>
<h1>集体声明h1</h1>
<h2 class="special">集体声明h2</h2>
<h3>集体声明h3</h3>
<h4>集体声明h4</h4>
<h5>集体声明h5</h5>
<p>集体声明p1</p>
<p class="special">集体声明p2</p>
<p id="one">集体声明p3</p>
</body>
</html>ネストされたセレクター
使用規則の概要:
1. ID ネストされたクラス #myid.myclass: <p id="sp" class="myclass"></p>。
2. 1 つの要素タグは複数のクラスを使用します。 . important.warning <p class="重要な警告">スペースを含めないように注意してください。それぞれ 2 つのクラスに適用できることを示すスペースがあります。
3. id タグ内の class 要素。 #myid .myclass <div id="myid"><p class="myclass"></p></div>
4. 要素タグの下のクラス。 p .myclass <p><span class="myclass"></span></p>
4. 要素タグの下の ID。 p #myid<p><span id="myid"></span></p>
5. クラスの下の要素タグ。 .myclass span <p class="myclass"><span>dd</span></p>
6. ID タグ #myid #myid2 <div id="myid"> 内の ID タグ; <div id="myid2"></div></div>。 id の使用法は要素タグの使用法と似ています。
7. .myclass1 .myclass2 は、2 つのクラスがネストではなく同じスタイルを使用することを意味します。クラスはクラス内にネストすることもできます。ただし、2 つの .myclasses の間にスペースがない場合は、両方のクラスが同時に存在することを意味します
8. 要素タグ ネストされた要素タグ p span <p><span></span></p> ;
例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>实例</title>
<style type="text/css">
#top {
background-color: #ccc;
padding: 1em
}
#top h1 {
color: #ff0;
}
#top p {
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<div id="top">
<h1>Chocolate curry</h1>
<p>This is my recipe for making curry purely with chocolate</p>
<p>Mmm mm mmmmm</p>
</div>
</body>
</html>
