CSS 分组 和 嵌套 选择器

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>
提交重置代码
高并发千万级数据库系统解决方案
  • 推荐课程
  • 评论
  • 问答
  • 笔记
  • 课件下载

phpcn_u87

这个还好,没有逻辑上的东西

7年前    添加回复 0

我是灰太狼

这个容易理解 就是找到想要给样式的那个标签

7年前    添加回复 0

汪汪

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

7年前    添加回复 0

大神,求带!

一环套一环呐

7年前    添加回复 0

看透不说透

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

7年前    添加回复 0

课件暂不提供下载,工作人员正在整理中,后期请多关注该课程~