教你玩转CSS 分组选择器和嵌套选择器

来源：cnblogs　　作者：水香木鱼　　时间：2021/2/19 14:48:12　　对本文有异议

分组选择器

在样式表中有很多具有相同样式的元素。

    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;
    }

原文链接：http://www.cnblogs.com/chenchunbo/p/14413298.html

友情链接：直通硅谷　点职佳　北美留学生论坛

CSS热门文章

CSS实现文字两端对齐

【WEB基础】HTML & CSS 基础入门（6）超链接

Javascript 对象 - 数学对象

对移动端兼容适配的分析

Element FORM结合Vue实现横向排列表单项

如何让一个input输入框居中

CSS Grid 布局完全指南(图解 Grid 详细教程)

css常见的各种布局上（两列布局）

vue+element导入导出excel

WEB前端动态背景集

CSS推荐文章

CSS布局概念与技术教程

15 分钟带你感受 CSS :has() 选择器的强大 - xingba-coder

现代 CSS 解决方案：文字颜色自动适配背景色！

脚踏esbuild祥云，胸怀tsx利刃，身披scss羽衣，追寻前端的本质

深入解析css-笔记

CSS 还原拉斯维加斯球数字动画

震惊！CSS 也能实现碰撞检测？

前端开发如何更好的避免样式冲突？级联层(CSS@layer)

现代 CSS 解决方案：CSS 原生支持的三角函数

利用css var函数让你的组件样式输出规范样式API，可定制性更高；