CSS 分组和嵌套选择器

所谓分组选择器就是当多个选择器对应的元素需要相同的样式时可以将多个选择器以逗号分隔放在一条样式声明的前面达到多个选择器多条样式声明相同的效果.

所谓嵌套选择器就是实现对选择器内部的选择器对应的元素实现样式的设置.css

在样式表中有很多具有相同样式的元素。

h1{color:green;}
h2{color:green;}
p{color:green;}

为了尽量减少代码，你可以使用分组选择器。
每个选择器用逗号分隔.
在下面的例子中，我们对以上代码使用分组选择器：

h1,h2,p{color:green;}

嵌套选择器

它可能适用于选择器内部的选择器的样式。
在下面的例子设置了三个样式：

为所有p元素指定一个样式

为所有class=”marked”的元素指定一个样式

为所有class=”marked”元素内的p元素指定一个样式

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

继续学习

新建文件

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

提交重置代码

自动运行