亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

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>

運行程序嘗試一下


嵌套選擇器

它可能適用于選擇器內部的選擇器的樣式。

在下面的例子設置了三個樣式:

為所有p元素指定一個樣式為所有class="marked"的元素指定一個樣式為所有class="marked"元素內的p元素指定一個樣式

      <!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>

運行程序嘗試一下




繼續(xù)學習
||
<!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>
提交重置代碼