一， 效果图。

二，代码。

<!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 Anaconda install

    在文件目录下执行: bash Anaconda3-4.2.0-Linux-x86_64.sh 根据提示输入回车 这里需要查看注册信息,回车浏览完信息即可 阅读完注册信息后,这里输入“yes” 回车即可 ...

  2. 麒麟子Cocos Creator实用技巧

    大家好,我是麒麟子, 开源棋牌<幼麟棋牌-四川麻将>(泄漏版叫 <达达麻将>)作者,成都幼麟科技创始人. 自09年进入游戏行业以来,不知不觉已经度过了十个春秋. 曾经我也血气方 ...

  3. 企业IT管理员IE11升级指南【14】—— IE11代理服务器配置

    企业IT管理员IE11升级指南 系列: [1]—— Internet Explorer 11增强保护模式 (EPM) 介绍 [2]—— Internet Explorer 11 对Adobe Flas ...

  4. [Swift]LeetCode347. 前K个高频元素 | Top K Frequent Elements

    Given a non-empty array of integers, return the k most frequent elements. Example 1: Input: nums = [ ...

  5. Python内置函数(9)——callable

    英文文档: callable(object) Return True if the object argument appears callable, False if not. If this re ...

  6. react-native学习（RN）--之Window环境下搭建环境配置，以及初始化建立react-native项目，（真机和模拟器运行的相关错误解决办法，android打包报错）

    react-native以后会更火的 一.安装java 二.安装Android Studio 三.安装react-native需要的Android studio额外部分 四.安装nodeJS  五.安 ...

  7. 在ASP.NET Core中获取客户端IP地址

    随着ASP.NET的发展,有不同的方式从请求中访问客户端IP地址.WebForms和MVC Web应用程序只是访问当前HTTP上下文的请求. var ip = HttpContext.Current. ...

  8. 在越狱的iPhone/iPad上安装自开发环境

    自开发跟自编译意思一样,后者表示一个开发语言的开发能力成熟度:前者则表示一个开发平台的开发能力成熟度. iPhone跟iPad面世这么多年,一直无法摆脱"娱乐"工具的宿命.Appl ...

  9. 实现无缝兼容ajax/websocket网页应用和服务

    为了让用户体验更好,页面前端往往是通过ajax来进行数据处理:由于浏览器的设计原因每个域名下的连接有限,这样导致了同时进行ajax数据请求效率无法得到有效地提升,为了提高效率和传统HTTP协议上的限制 ...

  10. MongoDB Export & Import

    在使用MongoDB数据库的过程中,避免不了需要将数据进行导入和导出的工作,下面为具体的用法.注意 不同的数据库版本可能存在略微的差异,所以在使用时,先查看 --help 来进行确认.下面的为3.6版 ...