CSS のグループ化とネストされたセレクター
CSS のグループ化されたネストされたセレクター
グループ化されたセレクター
スタイルシートには同じスタイルの要素が多數(shù)あります。 コードを最小限に抑えるために、グループ化されたセレクターを使用できます。 各セレクターはカンマで區(qū)切ります。
インスタンス
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style>
h1,h2,p
{
color:green;
}
</style>
</head>
<body>
<h1> PHP中文網(wǎng)你</h1>
<h2>php.cn</h2>
<p>學(xué)習(xí)PHP知識(shí)的好選擇.</p>
</body>
</html>プログラムを?qū)g行して試してみましょう
ネストされたセレクター
セレクター內(nèi)のセレクターのスタイルを選択する場(chǎng)合に機(jī)能する可能性があります。
次の例では、3 つのスタイルが設(shè)定されています:
すべての p 要素のスタイルを指定する class="marked" を持つすべての要素のスタイルを指定する class="marked" 要素內(nèi)のすべての p 要素のスタイルを指定する
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style>
p
{
color:blue;
text-align:center;
}
.marked
{
background-color:red;
}
.marked p
{
color:white;
}
</style>
</head>
<body>
<p>褪盡風(fēng)華，我依然在彼岸守護(hù)你</p>
<div class="marked">
<p>那些繁華哀傷終成過(guò)往，</p>
</div>
<p>請(qǐng)不要失望，平凡是為了最美的蕩氣回腸。</p>
</body>
</html> プログラムを?qū)g行して試してください
