购物车
登陆 / 注册
微信扫码登陆

推荐手册

CSS 分组 和 嵌套(grouping and nesting)

CSS 分组 和 嵌套(grouping and nesting)
分组选择器用于样式表中有很多具有相同样式的元素,嵌套选择器用于适用于选择器内部的选择器的样式
编辑:前端控 前端控 更新时间:2019-03-22 15:57:00

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>

运行实例 »

点击 "运行实例" 按钮查看在线实例

效果图:

网站导航
网站首页
学习路径
视频教程
开发软件
旗下子站
php中文网
phpstudy
技术文章
文档工具
关于我们
企业合作
人才招聘
联系我们
讲师招募
QQ交流群
QQ交流群
微信公众号
微信公众号