CSS 分组 和 嵌套 选择器


分组选择器

在样式表中有很多具有相同样式的元素。直线模组哪家好

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
{
margin: 0px; padding: 0px; color: rgb(0, 0, 139);">red;
}
.marked p
{
color:white;
}
p.marked{
text-decoration:underline;
}

尝试一下 »

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

  1. CSS 分组和嵌套选择器

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

  2. CSS:CSS 分组 和 嵌套 选择器

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

  3. CSS 分组 和 嵌套 选择器

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

  4. CSS 基础知识点 样式 选择器 伪类

    CSS 基础知识点汇集 版权声明:这篇博客是别人写的,大神博客地址 : https://www.cnblogs.com/Mtime/p/5184685.html 1.CSS 简介 CSS 指层叠样式表 ...

  5. 【代码笔记】Web-CSS-CSS 分组和嵌套

    一, 效果图. 二,代码. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

  6. CSS之分组选择器和嵌套选择器

    分组选择器, 将一个样式应用于多个类,或者标签啥的 每个选择器用逗号隔开 <!DOCTYPE html> <html> <head> <meta charse ...

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

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

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

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

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

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

随机推荐

  1. MySQL索引优化之双表示例

    select * from tableA a left join tableB b on a.f_id = b.id; 索引建tableB表上面, 因为left join 注定左表全都有,所以应该关心 ...

  2. npm 是干什么的?(非教程)

    看了之后就很清楚什么叫NPM,以后它是干嘛的.谢谢楼主 网上的 npm 教程主要都在讲怎么安装.配置和使用 npm,却不告诉新人「为什么要使用 npm」.今天我就来讲讲这个话题. 本文目标读者是「不太 ...

  3. 数据挖掘:周期性分析SMCA算法

    数据挖掘:周期性分析SMCA算法 原文地址:http://ieeexplore.ieee.org/stamp/stamp.jsp?arnumber=1423978 算法介绍 以时间顺序挖掘周期性的模式 ...

  4. 【Java】使用Lambda排序集合

    下面是Java lambda表达式的简单例子: // 1. 不需要参数,返回值为 5 () -> 5 // 2. 接收一个参数(数字类型),返回其2倍的值 x -> 2 * x // 3. ...

  5. Hive date_trunc函数

    The function date_trunc is conceptually similar to the trunc function for numbers. date_trunc('field ...

  6. 后台处理json数据

    InputStream in = request.getInputStream(); BufferedReader br = new BufferedReader(new InputStreamRea ...

  7. Windows 08 R2_创建AD DS域服务(图文详解)

    目录 目录 Active Directory概念 创建第一个AD域控制器 搭建DNS服务器 使用Windows窗口程序创建AD域控制器 AD与LDAP的关系 使用Powershell来创建ADDS域控 ...

  8. 在windows下用脚手架搭建vue环境

    做了几个月vue项目,最近两个项目使用脚手架搭建的,确实用脚手架搭建方便了许多,想想以前自己手配的时候,确实是... 1.在这之前我是默认你已经使用过vue的,也默认你已经安装了node.js 2.接 ...

  9. delphi xe2 opencv 学习

    安装环境 delphi xe2 + opencv opencv 从下面的地方下载  https://github.com/Laex/Delphi-OpenCV然后按照 此网站的 说明 一项以项的 安装 ...

  10. tensorflow|tf.train.slice_input_producer|tf.train.Coordinator|tf.train.start_queue_runners

    #### ''' tf.train.slice_input_producer :定义样本放入文件名队列的方式[迭代次数,是否乱序],但此时文件名队列还没有真正写入数据 slice_input_prod ...