17. CSS 分组 和 嵌套
目录
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 分组 和 嵌套
码云笔记 » 17. CSS 分组 和 嵌套