CSS のグループ化とネストされたセレクター

いわゆるグループ化セレクターとは、複数のセレクターに対応する要素が同じスタイルを必要とする場合、複数のセレクターをカンマで区切ってスタイルステートメントの前に配置して複数のセレクターを実現できることを意味します。 style宣言も同様の効果があります

いわゆるネストセレクターとは、セレクター内にセレクターに対応する要素のスタイルを設定するものです

スタイルシートには同じスタイルの要素がたくさんあります。

h1{color:green;}
h2{color:green;}
p{color:green;}

コードを最小限にするには、グループ化されたセレクターを使用できます。
各セレクターをカンマで区切ります。
以下の例では、上記のコードにグループ化されたセレクターを使用しています:

h1,h2,p{color:green;}

ネストされたセレクター

セレクター内のセレクターのスタイルを設定するのに適している可能性があります。
次の例では、3 つのスタイルが設定されています:

すべての p 要素のスタイルを指定します

class="marked" を持つすべての要素のスタイルを指定します

class="marked" 要素内のすべての p 要素のスタイルを指定しますスタイル

rreee

次のセクション

新しいファイル

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
p{ 
 color:blue; text-align:center;}
.marked{ background-color:red;}
.marked p{ color:white;}
</style>
</head>
<body>
<p>这个段落是蓝色文本，居中对齐。</p>
<div class="marked">
<p>这个段落不是蓝色文本。</p>
</div>
<p>所有 class="marked"元素内的 p 元素指定一个样式，但有不同的文本颜色。</p>
</body>
</html>

提出するリセットコード

自動運転

全画面表示