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. Comet OJ 茶颜悦色 线段树+扫描线(矩形覆盖最多点+优化)

    题目:https://www.cometoj.com/contest/59/problem/D?problem_id=2713 题意:给你一个正方形,然后给你n个点,这个正方形能随意放哪,要求那个正方 ...

  2. python读取数据库mysql报错

    昨天在学习PYTHON读取数据库的知识时,一直在报错,找不到原因. 最后同事说是语法错误. import sysreload(sys)sys.setdefaultencoding('gb18030') ...

  3. PHP面试 PHP基础知识 十一(开发环境及相关配置)

    开发环境及相关配置 版本控制软件 集中式和分布式 集中式:集中式版本控制工具,版本库集中存放在中央服务器,团队成员里的每个人工作时从中央服务器下载代码,个人修改后再提交到中央服务器 分布式:分布式版本 ...

  4. 实验吧关于隐写术的writeUp(二)

    0x01 Black Hole 1.下载文件后,发现打不开,放到kali中.用命令file 分析一下文件 root@trial:~/Documents# file blackhole.img blac ...

  5. switch gnome-terminal tabs

    Ctrl+Page Down (forward) and Ctrl+Page Up (backward). http://unix.stackexchange.com/a/67963

  6. zabbix主动模式设置

    zabbix客户端发数据给服务端分为主被动两种模式,主动模式是zabbix客户端主动向服务端发送数据,被动模式是被动等待服务端来取数据. 主动模式: 客户端每隔一段时间主动向服务端发起连接请求--&g ...

  7. Linux的各个发行版本(一)

    三大流派 1.Slackware SUSE Linux Enterprise Server (SLES) OpenSuse桌面 2.debian 迄今为止最遵循GNU规范的Linux系统 Ubuntu ...

  8. js中构造函数的原型添加成员的两种方式

    首先,js中给原型对象添加属性和方法. 方式一:对象的动态特效 给原型对象添加成员 语法:构造函数.prototype.方法名=function (){ } 方式二:替换原型对象(不是覆盖,而是替换, ...

  9. 《代码大全2》读书笔记 Week8

    这一周博主阅读了<代码大全2>第11章至第13章,第三部分——"变量"就结束了,第四部分作者将转入语句的讨论. 第十一章作者详细阐述了变量名的有效命名规则,第十二和十三 ...

  10. 百度地图errorcode: 230 uid: -1 appid -1 msg: APP Scode码校验失败

    最近要维护以前师兄的一个android项目,里面用到了百度地图,在我的机器上按照官网的方式获取的SHA1签名+包名申请ak: 然而就是报errorcode: 230 uid: -1 appid -1 ...