CSS 分組和巢狀選擇器

CSS 分組與巢狀選擇器

分組選擇器

#在樣式表中有很多相同樣式的元素，

為了盡量減少程式碼，你可以使用分組選擇器。

每個選擇器用逗號分隔。

實例

       <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
    <style>
        h1,h2,p
        {
            color:green;
        }
    </style>
</head>

<body>
<h1> PHP中文网你</h1>
<h2>php.cn</h2>
<p>学习PHP知识的好选择.</p>
</body>
</html>

執行程式嘗試

      <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
    <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>请不要失望，平凡是为了最美的荡气回肠。</p>
</body>
</html>

執行程式嘗試

#巢狀選擇器

####它可能適用於選擇器內部的選擇器的樣式。 ######在下面的範例設定了三個樣式：######為所有p元素指定一個樣式為所有class="marked"的元素指定一個樣式為所有class="marked"元素內的p元素指定一個樣式###rrreee######運行程式嘗試####################################################################### ################下一節

新建檔案

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>php中文网(php.cn)</title>
 <style>
 h1,h2,p
 {
 color: #d4d223;
 }
 </style>
</head>

<body>
<h1>PHP中文网</h1>
<h2>php.cn</h2>
<p>你学习PHP知识的好选择.</p>
</body>
</html>

提交重置程式碼

自動運行

全螢幕

CSS 分組 和 巢狀 選擇器

CSS 分組和巢狀選擇器