分组选择器，

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

每个选择器用逗号隔开

<!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. dubbo在idea下的使用创建 服务者，消费者 注册中心

    1.基于windows 下  spring 下的dubbo  需要书写配置文件 (1).创建带有web工程的项目 创建一个服务者 package cn.edu.aynu.bean; import lo ...

  2. 其他综合-使用Xshell远程连接管理Linux实践

    使用Xshell远程连接管理Linux实践 1. Xshell整体优化 1)点击 工具 ,然后选择 选项 2)在 常规 选项中,下面的存放路径根据个人爱好修改(可选默认) 3)在 更新 选项中,将 √ ...

  3. Python量化交易

    资料整理: 1.python量化的一个github 代码 2.原理 + python基础 讲解 3.目前发现不错的两个量化交易 学习平台: 聚宽和优矿在量化交易都是在15年线上布局的,聚宽是15年的新 ...

  4. 【数学建模】MATLAB语法

    一.向量.矩阵的表示和使用 format long  %小数很多format short %默认4位小数format rat %显示最近的分数format short e %指数格式的数 尾数多少 e ...

  5. 深入jar包：从jar包中读取资源文件getResourceAsStream

    一.背景 我们常常在代码中读取一些资源文件(比如图片,音乐,文本等等). 在单独运行的时候这些简单的处理当然不会有问题.但是,如果我们把代码打成一个jar包以后,即使将资源文件一并打包,这些东西也找不 ...

  6. C++回顾day03---<模板>

    一:函数模板 建立一个通用函数,其函数类型和形参类型不具体指定,用一个虚拟的类型来代表.这个通用函数就称为函数模板.凡是函数体相同的函数都可以用这个模板来代替,不必定义多个函数,只需要在模板中定义一次 ...

  7. Entity Framework入门教程（9)---离线场景附加实体图集到上下文

    附加离线实体图集到上下文 这节主要内容是通过不同的方法将离线实体附加到上下文中. 在离线场景中,保存一个实体要略微困难一些.当我们保存一个离线的实体图集或一个单独的离线实体时,我们需要做两件事.首先, ...

  8. Netty 源码分析

    https://segmentfault.com/a/1190000007282628 netty社区-简书闪电侠 :https://netty.io/wiki/related-articles.ht ...

  9. Vim使用技巧汇总

    一 写在开头 1.1 本文内容 Vim使用技巧与学习资源汇总. 二 Vim学习资源 1. Vimtutor 2. Vim中文帮助(http://vimcdoc.sourceforge.net/doc/ ...

  10. 深入学习javaScript闭包(闭包的原理，闭包的作用，闭包与内存管理)

    前言 虽然JavaScript是一门完整的面向对象的编程语言,但这门语言同时也拥有许多函数式语言的特性. 函数式语言的鼻祖是LISP,JavaScript在设计之初参考了LISP两大方言之一的Sche ...