ylbtech-CSS:CSS 分组 和 嵌套 选择器
1.返回顶部
1、

CSS 分组 和 嵌套 选择器


Grouping Selectors

在样式表中有很多具有相同样式的元素。

h1
{
color:green;
}
h2
{
color:green;
}
p
{
color:green;
}

为了尽量减少代码,你可以使用分组选择器。

每个选择器用逗号分隔.

在下面的例子中,我们对以上代码使用分组选择器:

实例

h1,h2,p
{
color:green;
}

尝试一下 »


嵌套选择器

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

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

  • 为所有p元素指定一个样式
  • 为所有class="marked"的元素指定一个样式
  • 为所有class="marked"元素内的p元素指定一个样式

实例

p
{
color:blue;
text-align:center;
}
.marked
{
background-color:red;
}
.marked p
{
color:white;
}

尝试一下 »

2、
2.返回顶部
 
3.返回顶部
 
4.返回顶部
 
5.返回顶部
1、
2、
 
6.返回顶部
 
作者:ylbtech
出处:http://ylbtech.cnblogs.com/
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

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 分组 和 嵌套 选择器

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

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

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

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

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

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

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

  7. CSS 高级语法 ---- 继承和选择器的分组

    1. 选择器的分组 —————————————————————————   可以对选择器进行分组,被分组的选择器享用共同的声明.   h1,h2,h3,h4,h5,h6 { color: green; ...

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

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

  9. CSS学习摘要-语法和选择器

    主要摘自网络开发者. 从最基本的层次来看,CSS是由两块内容组合而成的: 属性(Property):一些人类可理解的标识符,这些标识符指出你想修改哪一些样式,例如:字体,宽度,背景颜色等. 属性值(V ...

随机推荐

  1. 关于Extjs6.0 controller文件过大,实现模块化分离

    Extjs一般都是一个视图对应着一个controller 一旦碰到视图中逻辑过于繁琐造成controller文件过大不利于维护和修改,所以要通过混入mixins混入功能来实现模块化! 首先创建一个视图 ...

  2. 筆記本 wifi走外网线 網卡走內網

    筆記本 wifi走外网线  網卡走內網 ,案列 -------------------------------------------------------- route print        ...

  3. python pymouse用法记录

    from pymouse import PyMouse m = PyMouse() m.position()#获取当前坐标的位置 m.move(x,y)#鼠标移动到xy位置 m.click(x,y)# ...

  4. SQLserver服务无法启动

    今天调整了一下sqlserver tcp/ip 网络协议,重启生效时,SQLserver服务无法启动. 搞了一天都没发现问题,准备重装,发现也比较麻烦.看了日志,网上查了一堆解决方案,均没有. 后台发 ...

  5. 前端学习笔记——CSS选择器

    学习css选择器之前我们先了解下css规则: CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明: 选择器通常是需要改变样式的 HTML 元素. 每条声明由一个属性和一个值组成. 1.id选 ...

  6. python作业/练习/实战:生成随机密码

    作业要求1.写一个函数,函数的功能是生成一批密码,存到文件里面 def gen_password(num): #num代表生成多少条密码2.密码复杂度要求 1)长度在,8-16位之间 2)密码必须包括 ...

  7. 无法启动此程序 ,因为计算机中丢失MSVCP120.dll

    1.文件丢失问题 无法启动此程序 ,因为计算机中丢失MSVCP120.dll 具体如下图所示: 等dll文件丢失,可以去下载 DirectX修复工具去修复即可 http://www.pc6.com/s ...

  8. javaSE Comparable接口中的compareTo()方法

    我们都知道,要对自建对象按照一定规则进行排序的话,要求自建对象实现Comparable接口,并重写compareTo() 方法,但compareTo() 方法的释义却不是那么容易搞清楚,下面举例进行阐 ...

  9. Java中this的基础用法

    update on 2019-07-07 在Java核心技术一书中看到调用方法时this作为隐式参数传入的. 突然间许多问题都懂了 比如:方法的多态 父类变量指向子类对象的引用 对象变量指向的实际类型 ...

  10. docker build 时 alpine 无法安装软件问题的解决

    使用 alpine 作为 docker 基础镜像时,运行 apk add ..... 遇到如下错误: WARNING: Ignoring http://dl-cdn.alpinelinux.org/a ...