分组选择器，

将一个样式应用于多个类，或者标签啥的

每个选择器用逗号隔开

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>菜鸟教程(runoob.com)</title>

<style>

h1,h2,p

{

    color:green;

}

</style>

</head>

<body>

<h1>Hello World!</h1>

<h2>Smaller heading!</h2>

<p>This is a paragraph.</p>

</body>

</html>

结果如下

嵌套选择器

它可能适用于选择器内部的选择器的样式。

在下面的例子设置了三个样式：

  • p{ }: 为所有 p 元素指定一个样式。
  • .marked{ }: 为所有 class="marked" 的元素指定一个样式。
  • .marked p{ }: 为所有 class="marked" 元素内的 p 元素指定一个样式。
  • p.marked{ }: 为所有 class="marked" 的 p 元素指定一个样式。
<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>菜鸟教程(runoob.com)</title>

<style>

    body{

        background-color:darkgrey;

    }

p

{

    color:blue;

    text-align:center;

}

.marked

{

    background-color:red;

}

.marked p

{

    color:white;

}

p.marked{

    text-decoration:underline;

}

</style>

</head>

<body>

<p>这个段落是蓝色文本，居中对齐。</p>

<div class="marked">

<p>这个段落不是蓝色文本。</p>

</div>

<p>所有 class="marked"元素内的 p 元素指定一个样式，但有不同的文本颜色。</p>

<p class="marked">带下划线的 p 段落。</p>

</body>

</html>

在 CSS3 中包含了四种组合方式:

  • 后代选择器(以空格分隔)
  • 子元素选择器(以大于号分隔）
  • 相邻兄弟选择器（以加号分隔）
  • 普通兄弟选择器（以破折号分隔）

链接如下

http://www.runoob.com/css/css-combinators.html

CSS之分组选择器和嵌套选择器的更多相关文章

  1. less可以做什么？less详解！(less嵌套选择器实现纯CSS二级导航)

    前端技术众多,作为一名前端工程师,我们每接触新技术首先要懂得此技术的优势和劣势,这是最基本的.往深入了说还需要懂得技术的应用场景,配合的技术等,方便为以后架构做准备.而less作为一门CSS预处理语言 ...

  2. CSS 分组和嵌套选择器

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

  3. CSS分组和嵌套选择器

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

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

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

  5. CSS 分组 和 嵌套 选择器

    Grouping Selectors 在样式表中有很多具有相同样式的元素. h1{color:green;}h2{color:green;}p{color:green;} 为了尽量减少代码,你可以使用 ...

  6. CSS（一） 引入方式 选择器 权重

    Css(一) Cascading Style Sheet 层叠样式表 css注释方式/*  */ 一.Css引入方式 1. 行间样式 style=" key:value; " &l ...

  7. CSS 简介、 选择器、组合选择器

    #CSS 装饰器引入<!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...

  8. HTML+CSS基础知识（2）选择器的使用、盒子模型的讲解、列表的使用

    文章目录 1.CSS基础知识 2.css样式 2.1.代码: 2.2 测试结果 3.CSS的语法 3.1 代码 4.块元素和行内元素 4.1 代码 4.2 测试结果 5.常用的选择器 5.1 代码块 ...

  9. CSS基础（三）：选择器

    常用选择器 元素选择器,即html标记如div,ul,li,p,h1~h6,table等. p { font-size:14px; } h1 { color:#F00; } 复合选择器, 由两个选择器 ...

随机推荐

  1. P1196 [NOI2002]银河英雄传说(带权并查集)

    这个题的题目背景很是宏大,什么宇宙战舰的都出来了.但细细一看,我们就会发现,这是带权并查集的题目,首先我们还是像之前在并查集中的操作一样,但在这里我们还是应该开数组来维护所要加的权值,两个战舰是否在同 ...

  2. 使用Node.js搭建数据爬虫crawler

    0. 通用爬虫框架包括: (1) 将爬取url加入队列,并获取指定url的前端资源(crawler爬虫框架主要使用Crawler类进行抓取网页) (2)解析前端资源,获取指定所需字段的值,即获取有价值 ...

  3. Amazon SNS (Simple Notification Service) Using C# and Visual Studio

    SNS (Amazon Simple Notification Services) Amazon SNS (Amazon Simple Notification Services) is a noti ...

  4. [SCOI2015]小凸想跑步

    题目描述 小凸晚上喜欢到操场跑步,今天他跑完两圈之后,他玩起了这样一个游戏. 操场是个凸 n 边形, nn 个顶点按照逆时针从 0 ∼n−1 编号.现在小凸随机站在操场中的某个位置,标记为p点.将 p ...

  5. L2-006 树的遍历 （25 分) （根据后序遍历与中序遍历建二叉树）

    题目链接:https://pintia.cn/problem-sets/994805046380707840/problems/994805069361299456 L2-006 树的遍历 (25 分 ...

  6. 为什么要使用50ohm阻抗？

    对于接收机我们期望同轴线的损耗越低越好 对于发射机同轴线的功率效率则是越大越好 所以在二者性能最优时阻抗并不相等 https://www.sohu.com/a/109536765_335274

  7. Java多线程、线程池和线程安全整理

    多线程 1.1      多线程介绍 进程指正在运行的程序.确切的来说,当一个程序进入内存运行,即变成一个进程,进程是处于运行过程中的程序,并且具有一定独立功能. 1.2      Thread类 通 ...

  8. SpringCloud笔记一：扫盲

    目录 前言 什么是微服务? 微服务的优缺点是什么? 微服务之间是如何通讯的? SpringCloud和Dubbo有哪些区别? SpringCloud和SpringBoot的关系? 什么是服务熔断?什么 ...

  9. 监控c3p0的连接池

    SqlSession session = SessionFactory.getSqlSession(dbid); List<Map<String, Object>> resul ...

  10. HDU 1051(处理木棍 贪心)

    题意是处理一批木棍,如果当前处理的木棍长度和重量均大于前一根木棍的长度和重量,则处理当前木棍花费为 0,否则花费为 1. 用结构体存储木棍信息,将木棍按照长度从小到大排序,若长度相等则按照重量从小到大 ...