- HTML中文网
- 联系QQ：88526
- QQ交流群
- 微信公众号
前端控
更新时间：2019-03-25 10:59:25
CSS 分组 和 嵌套 选择器
分组选择器
在样式表中有很多具有相同样式的元素
一般为了尽量减少代码，可以使用分组选择器。每个选择器用逗号分隔
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
h1,h2
{
color:pink;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<h2>HTML中文网</h2>
</body>
</html>点击 "运行实例" 按钮查看在线实例
效果图：
嵌套选择器
适用于选择器内部的选择器的样式
例：
p{ }: 为所有的 p 元素指定一个样式
.demo }: 为所有的class="demo" 的元素指定一个样式
.demo p{ }: 为所有 class="demo" 元素内的 p 元素指定一个样式
p.demo{ }: 为所有 class="demo" 的 p 元素指定一个样式
p
{
color:red;
text-align:center;
}
.demo
{
background-color:pink;
}
.demo p
{
color:skyblue;
}
p.demo{
text-decoration:underline;
}
</style>
</head>
<body>
<p>这个段落是红色文本，居中对齐。</p>
<div class="demo">
<p>设置div内的p元素的字体颜色</p>
</div>
<p class="demo">设置p中class为demo的样式</p>点击 "运行实例" 按钮查看在线实例
效果图：
推荐手册