返回顶部

CSS 分组 和 嵌套 选择器

[复制链接]
半糖不加冰Lv.2 显示全部楼层 发表于 2021-9-27 14:10:06 |阅读模式 打印 上一主题 下一主题
(图片来源于公开网络,若涉及侵权联系尽快删除!)
  一、分组选择器
  在样式表中有很多具有相同样式的元素。
 
[CSS] 纯文本查看 复制代码
h1 {
    color:green;
}
h2 {
    color:green;
}
p {
    color:green;
}

  为了尽量减少代码,你可以使用分组选择器。
  每个选择器用逗号分隔。
  在下面的例子中,我们对以上代码使用分组选择器:
  实例
[CSS] 纯文本查看 复制代码
h1,h2,p
{
    color:green;
}

  二、嵌套选择器
  它可能适用于选择器内部的选择器的样式。
  在下面的例子设置了四个样式:
  p{}:为所有p元素指定一个样式。
  .marked{}:为所有class="marked"的元素指定一个样式。
  .markedp{}:为所有class="marked"元素内的p元素指定一个样式。
  p.marked{}:为所有class="marked"的p元素指定一个样式。
  实例
[CSS] 纯文本查看 复制代码
p
{
    color:blue;
    text-align:center;
}
.marked
{
    background-color:red;
}
.marked p
{
    color:white;
}
p.marked{
    text-decoration:underline;
}


本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
回复

使用道具 举报

精彩评论1

阿莫Lv.2 显示全部楼层 发表于 2021-9-27 14:26:47
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

达内教育:成立于2002年。致力于面向IT互联网行业,培养软件开发工程师、测试工程师、系统管理员、智能硬件工程师、UI设计师、网络营销、会计等职场人才 达内使命:缔造年轻人的中国梦、缔造达内员工的中国梦 达内愿景:做管理一流的教育公司
  • 商务合作

  • 微信公众号

  • Powered by Discuz! X3.4 | Copyright © 2002-2021, 达内教育 Tedu.cn
  • 京ICP备08000853号-56 |网站地图 | 京公网安备 11010802029508号