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>

リセットコード

自動運転

提出する

プレビュー Clear