一， 效果图。

二，代码。

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>CSS 分组和嵌套</title>

    <style>

    h1,

    h2,

    p {

        color: green;

    }

    .marked {

        background-color: red;

    }

    .marked p {

        color: white;

    }

    </style>

</head>

<body>

    <h1>hello </h1>

    <h2>span</h2>

    <p>this is a paragraph</p>

    <div class="marked">

        <p>this is p</p>

    </div>

</body>

</html>

参考资料：《菜鸟教程》

【代码笔记】Web-CSS-CSS 分组和嵌套的更多相关文章

  1. CSS 分组和嵌套选择器

    CSS 分组和嵌套选择器 一.分组选择器 在样式表中有很多具有相同样式的元素. h1 { color:green; } h2 { color:green; } p { color:green; } 为 ...

  2. CSS分组和嵌套选择器

    CSS 分组 和 嵌套 选择器 分组选择器 在样式表中有很多具有相同样式的元素.直线模组哪家好 h1 {     color:green; } h2 {     color:green; } p { ...

  3. CSS：CSS 分组 和 嵌套 选择器

    ylbtech-CSS:CSS 分组 和 嵌套 选择器 1.返回顶部 1. CSS 分组 和 嵌套 选择器 Grouping Selectors 在样式表中有很多具有相同样式的元素. h1 { col ...

  4. 2、前端--初见前后端交互、CSS简介、基本选择器、组合选择器、属性选择器、分组与嵌套、伪类选择器

    今日内容概要 初窥后端框架 css简介 css选择器 今日内容详细 初次体验前后端交互 # 代码无需掌握 只看效果即可 """后端框架:可以简单的理解为别人写好的一个非常 ...

  5. 前端知识之CSS(1)-css语法、css选择器（属性、伪类、伪元素、分组与嵌套）、css组合器

    目录 前端基础之css 1.关于css的介绍 2.css语法 3.三种编写CSS的方式 3.1.style内部直接编写css代码 3.2.link标签引入外部css文件 3.3.标签内直接书写 4.c ...

  6. Python学习笔记整理总结【web基础】【web/HTML/CSS/JavaScript/DOM/jQuery】

    一.HTML HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写,他是一种制作万维网页面标准语言(标记).相当于定义统一的一套规则,大家都来遵守他,这样就可以 ...

  7. 写给自己的web总结——css篇（1）

    上一篇写了关于html的知识,算是小试牛刀,这次来尝试写一下css. 初步了解css css的全称为cascading style sheet-- 层叠样式表,通过编入代码来对html里的标签做出各种 ...

  8. WEB前端 CSS(非布局)

    目录 WEB前端 CSS CSS引入方式 CSS结构 CSS选择器 直接选择器 组合选择器 分组选择器 也叫并集选择器 属性选择器 伪类选择器 伪元素选择器 CSS选择器是一个查找的过程,高效的查找影 ...

  9. CSS3基础——笔记+实战案例(CSS基本用法、CSS层叠性、CSS继承性)

    CSS3基础——笔记 CSS是Cascading Style Sheet的缩写,翻译为"层叠样式表" 或 "级联样式表".CSS定义如何显示HTML的标签央视, ...

随机推荐

  1. 访问不了虚拟机 ubuntu中的myql，解决方案

    ============================================================== 1. 现象 2. 原因分析 2.1 访问虚拟机中的mysql的前提: 你的 ...

  2. 用C#+Selenium+ChromeDriver 生成我的咕咚跑步路线地图

    先上结果: 之前 在公司业务中用过java+Selenium+ChromeDriver ,使用起来非常顺手,可以完美模拟真实的用户浏览行为.最近休息的时候想用C#也试一下,于是有了本文. 实现原理一样 ...

  3. eclipse集成lombok

    第一部下载 lombok jar包 https://projectlombok.org/download.html lombok下载地址,进入该网址后可以看到如下界面,点击下载就行了.   下载 ja ...

  4. [Swift]LeetCode39. 组合总和 | Combination Sum

    Given a set of candidate numbers (candidates) (without duplicates) and a target number (target), fin ...

  5. Windows系统下安装Redis

    1.首先你要有redis-latest-windws和redisclient-客户端工具 2.在redis-latest-windws文件夹内创建一个批处理文件  start.bat 创建批处理文件的 ...

  6. [Abp 源码分析]五、系统设置

    0.简要介绍 Abp 本身有两种设置,一种就是 上一篇文章 所介绍的模块配置 Configuration,该配置主要用于一些复杂的数据类型设置,不仅仅是字符串,也有可能是一些 C# 运行时的一些变量. ...

  7. TLS 1.3 VS TLS 1.2，让你明白 TLS 1.3 的强大

    HTTPS 加密时代已经来临,近两年,Google.Baidu.Facebook 等互联网巨头,不谋而合地开始大力推行 HTTPS, 2018 年 7 月 25 日,Chrome 68 上线,所有 H ...

  8. https和http共存的nginx简单配置

    server{ listen 80; listen 443 ssl; ssl_certificate /usr/local/nginx/ssl/www.demo.com/www.demo.com.cn ...

  9. 从锅炉工到AI专家(5)

    图像识别基本原理 从上一篇开始,我们终于进入到了TensorFlow机器学习的世界.采用第一个分类算法进行手写数字识别得到了一个91%左右的识别率结果,进展可喜,但成绩尚不能令人满意. 结果不满意的原 ...

  10. SpringBoot入门教程(十六)@Autowired、@Inject、@Resource

    @Resource,@Autowired,@Inject 这3种都是用来注入bean的,它们属于不同的程序中.详情参见下表: v区别 ANNOTATION PACKAGE SOURCE 作用域 实现方 ...