 |
位置：电子教程 > CSS入门到精通 (如果看不到内容请使用360浏览器) | 推荐学习资源 |
|
位置：电子教程 > CSS入门到精通 (如果看不到内容请使用360浏览器) | 推荐学习资源 |
| 当前阅读教程：CSS入门到精通 > CSS 分组和嵌套 | |
| 阅读(22555525) 收藏 赞(5685) 分享 | |
| 上一篇： 所有填充属性 padding | 下一篇： CSS 尺寸 (Dimension) |
分组选择器在样式表中有很多具有相同样式的元素。 h1
{
color:green;
}
h2
{
color:green;
}
p
{
color:green;
}为了尽量减少代码，你可以使用分组选择器。 每个选择器用逗号分隔。 实例在下面的例子中，我们对以上代码使用分组选择器 代码<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>分组选择器</title>
<!--定义内部样式-->
<style>
/*分组选择器:几个元素同样的样式写在一起*/
h1,h2,p{
color: green;/*字体颜色：绿色*/
}
</style>
</head>
<body>
<h1>CSS入门到精通课程</h1>
<h2>黄菊华老师</h2>
<p>有全套Web全栈学习视频</p>
</body>
</html>效果图
嵌套选择器它可能适用于选择器内部的选择器的样式。 在下面的例子设置了几个样式： n p{ }: 为所有 p 元素指定一个样式。 n .marked{ }: 为所有 的元素指定一个样式。 n .marked p{ }: 为所有 元素内的 p 元素指定一个样式。 n p.marked{ }: 为所有 的 p 元素指定一个样式。 实例代码<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>嵌套选择器</title>
<!--定义内部样式-->
<style>
p{ /*为所有 p 元素指定一个样式*/
color:blue;
text-align:center;
}
.marked{ /*为所有 的元素指定一个样式*/
background-color:gray;
}
.marked p{ /*为所有 元素内的 p 元素指定一个样式*/
color:white;
}p.marked{ /*为所有 的 p 元素指定一个样式*/
color: red;
}
</style>
</head>
<body>
<p>这个段落是蓝色文本，居中对齐。</p>
<div>
<p>这个段落不是蓝色文本。</p>
</div>
<p>所有元素内的 p 元素指定一个样式，但有不同的文本颜色。</p>
<p>红色文字</p>
</body>
</html>效果图
|
|
| 上一篇： 所有填充属性 padding | 下一篇： CSS 尺寸 (Dimension) |
