JsSaaS平台
系统、网站、API站点，简单高效开发
CSS 教程
CSS 教程
CSS 简介
CSS 语法
CSS Id 和 Class
CSS 创建
CSS 背景
CSS 文本格式文本格式
CSS 字体
CSS 链接
CSS 列表
CSS 表格
CSS 盒子模型
CSS 边框
CSS 轮廓（outline）
CSS margin(外边距)
CSS padding（填充）
CSS 分组 和 嵌套 选择器
CSS 尺寸 (Dimension)
CSS Display(显示) 与 Visibility（可见性）
CSS Position(定位)
CSS 布局 - Overflow
CSS Float(浮动)
CSS 布局 - 水平 & 垂直对齐
CSS 伪类(Pseudo-classes)
CSS 伪元素
CSS 导航栏
CSS 图片廊
CSS 图像透明/不透明
CSS 图像拼合技术
CSS 媒体类型
CSS 属性 选择器
CSS 表单
CSS 计数器
CSS 网页布局
CSS !important 规则
你已经学习了CSS,下一步学习什么呢?
CSS 实例
CSS3 教程
CSS3 教程
CSS3 简介
CSS3 边框
CSS3 背景
CSS3 渐变（Gradients）
CSS3 文本效果
CSS3 字体
CSS3 2D 转换
CSS3 3D 转换
CSS3 过渡
CSS3 动画
CSS3 多列
CSS3 用户界面
CSS 图片
CSS 按钮
CSS 分页实例
CSS3 框大小
CSS3 多媒体查询
CSS3 多媒体查询实例
CSS 响应式设计
响应式 Web 设计 - Viewport
响应式 Web 设计 - 网格视图
响应式 Web 设计 - 媒体查询
响应式 Web 设计 - 图片
响应式 Web 设计 - 视频(Video)
响应式 Web 设计 - 框架
CSS 参考手册
CSS 分组 和 嵌套 选择器
CSS 分组 和 嵌套 选择器
分组选择器
在样式表中有很多具有相同样式的元素。
h1 {
color:green;
}
h2 {
color:green;
}
p {
color:green;
}
为了尽量减少代码，你可以使用分组选择器。
每个选择器用逗号分隔。
在下面的例子中，我们对以上代码使用分组选择器：
实例
h1,h2,p
{
color:green;
}
嵌套选择器
它可能适用于选择器内部的选择器的样式。
在下面的例子设置了四个样式：
- p{ }: 为所有 p 元素指定一个样式。
- .marked{ }: 为所有 class="marked" 的元素指定一个样式。
- .marked p{ }: 为所有 class="marked" 元素内的 p 元素指定一个样式。
- p.marked{ }: 为所有 class="marked" 的 p 元素指定一个样式。
实例
p
{
color:blue;
text-align:center;
}
.marked
{
background-color:red;
}
.marked p
{
color:white;
}
p.marked{
text-decoration:underline;
}
备案号：闽ICP备20003806号 厦门市湖里区陈朝能网络技术工作室