CSS 分组 和 嵌套 选择器LOGIN

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>

运行程序尝试一下




下一节
<!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>
提交重置代码
章节课件