码云 17. CSS 分组 和 嵌套
AI 概述
CSS 分组 和 嵌套 选择器分组选择器嵌套选择器
CSS 分组 和 嵌套 选择器
CSS 分组可以将具有相同样式的选择器进行分组，减少代码量。
CSS 嵌套适用于选择器内部的选择器的样式。
分组选择器
在样式表中有很多具有相同样式的元素。
h1 {
color:green;
}
h2 {
color:green;
}
p {
col...
目录
CSS 分组 和 嵌套 选择器
CSS 分组可以将具有相同样式的选择器进行分组，减少代码量。
CSS 嵌套适用于选择器内部的选择器的样式。
分组选择器
在样式表中有很多具有相同样式的元素。
h1 {
color:green;
}
h2 {
color:green;
}
p {
color:green;
}
为了尽量减少代码，你可以使用分组选择器。
每个选择器用逗号分隔。
在下面的例子中，我们对以上代码使用分组选择器：
<style>
h1,h2,p
{
color:green;
}
</style>
<body>
<h1>Hello World!</h1>
<h2>这是一个二级标题!</h2>
<p>这是一个段落。</p>
</body>
效果如下：
提示：您可以对任意多个选择器进行分组，CSS 对此没有任何限制。
嵌套选择器
它可能适用于选择器内部的选择器的样式。
在下面的例子设置了四个样式：
p{ }: 为所有 p 元素指定一个样式。.marked{ }: 为所有 class=”marked” 的元素指定一个样式。.marked p{ }: 为所有 class=”marked” 元素内的 p 元素指定一个样式。p.marked{ }: 为所有 class=”marked” 的 p 元素指定一个样式。
<style>
p{
color:blue;
text-align:center;
}
.marked{
background-color:red;
}
.marked p{
color:white;
}
p.marked{
text-decoration:underline;
}
</style>
<body>
<p>这个段落是蓝色文本，居中对齐。</p>
<div class="marked">
<p>这个段落不是蓝色文本。</p>
</div>
<p>所有 class="marked"元素内的 p 元素指定一个样式，但有不同的文本颜色。</p>
<p class="marked">带下划线的 p 段落。</p>
</body>
效果如下：
以上关于17. CSS 分组 和 嵌套的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。
微信
支付宝声明：本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符，请将相关资料发送至 admin@mybj123.com 进行投诉反馈，一经查实，立即处理！
重要：如软件存在付费、会员、充值等，均属软件开发者或所属公司行为，与本站无关，网友需自行判断
码云笔记 » 17. CSS 分组 和 嵌套
如若内容造成侵权/违法违规/事实不符，请将相关资料发送至 admin@mybj123.com 进行投诉反馈，一经查实，立即处理！
重要：如软件存在付费、会员、充值等，均属软件开发者或所属公司行为，与本站无关，网友需自行判断
码云笔记 » 17. CSS 分组 和 嵌套
