CSS:CSS 分组 和 嵌套 选择器
| ylbtech-CSS:CSS 分组 和 嵌套 选择器 |
| 1.返回顶部 |
CSS 分组 和 嵌套 选择器
Grouping Selectors
在样式表中有很多具有相同样式的元素。
h1
{
color:green;
}
h2
{
color:green;
}
p
{
color:green;
}
为了尽量减少代码,你可以使用分组选择器。
每个选择器用逗号分隔.
在下面的例子中,我们对以上代码使用分组选择器:
嵌套选择器
它可能适用于选择器内部的选择器的样式。
在下面的例子设置了三个样式:
- 为所有p元素指定一个样式
- 为所有class="marked"的元素指定一个样式
- 为所有class="marked"元素内的p元素指定一个样式
实例
p
{
color:blue;
text-align:center;
}
.marked
{
background-color:red;
}
.marked p
{
color:white;
}
| 2.返回顶部 |
| 3.返回顶部 |
| 4.返回顶部 |
| 5.返回顶部 |
| 6.返回顶部 |
![]() |
作者:ylbtech 出处:http://ylbtech.cnblogs.com/ 本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。 |
CSS:CSS 分组 和 嵌套 选择器的更多相关文章
- CSS 分组和嵌套选择器
CSS 分组和嵌套选择器 一.分组选择器 在样式表中有很多具有相同样式的元素. h1 { color:green; } h2 { color:green; } p { color:green; } 为 ...
- CSS分组和嵌套选择器
CSS 分组 和 嵌套 选择器 分组选择器 在样式表中有很多具有相同样式的元素.直线模组哪家好 h1 { color:green; } h2 { color:green; } p { ...
- CSS 分组 和 嵌套 选择器
Grouping Selectors 在样式表中有很多具有相同样式的元素. h1{color:green;}h2{color:green;}p{color:green;} 为了尽量减少代码,你可以使用 ...
- CSS之分组选择器和嵌套选择器
分组选择器, 将一个样式应用于多个类,或者标签啥的 每个选择器用逗号隔开 <!DOCTYPE html> <html> <head> <meta charse ...
- 2、前端--初见前后端交互、CSS简介、基本选择器、组合选择器、属性选择器、分组与嵌套、伪类选择器
今日内容概要 初窥后端框架 css简介 css选择器 今日内容详细 初次体验前后端交互 # 代码无需掌握 只看效果即可 """后端框架:可以简单的理解为别人写好的一个非常 ...
- 前端知识之CSS(1)-css语法、css选择器(属性、伪类、伪元素、分组与嵌套)、css组合器
目录 前端基础之css 1.关于css的介绍 2.css语法 3.三种编写CSS的方式 3.1.style内部直接编写css代码 3.2.link标签引入外部css文件 3.3.标签内直接书写 4.c ...
- CSS 高级语法 ---- 继承和选择器的分组
1. 选择器的分组 ————————————————————————— 可以对选择器进行分组,被分组的选择器享用共同的声明. h1,h2,h3,h4,h5,h6 { color: green; ...
- less可以做什么?less详解!(less嵌套选择器实现纯CSS二级导航)
前端技术众多,作为一名前端工程师,我们每接触新技术首先要懂得此技术的优势和劣势,这是最基本的.往深入了说还需要懂得技术的应用场景,配合的技术等,方便为以后架构做准备.而less作为一门CSS预处理语言 ...
- CSS学习摘要-语法和选择器
主要摘自网络开发者. 从最基本的层次来看,CSS是由两块内容组合而成的: 属性(Property):一些人类可理解的标识符,这些标识符指出你想修改哪一些样式,例如:字体,宽度,背景颜色等. 属性值(V ...
随机推荐
- ThinkPHP5使用jwt进行会话验证
以往,没有做过前后端分离的项目之前,都是服务器渲染的模板,然后用cookie和session进行账号的权限验证或者是登录状态的管理.后来接触了vue和小程序之后,在进行前后端分离的时候,就会遇到权限验 ...
- MySQL if,ifnull,nullif 函数
一.IF IF(exPR1,expr2,expr3) 如果 expr1 是TRUE (expr1 <> 0 and expr1 <> NULL),则 IF()的返回值为expr ...
- PouchContainer 容器技术演进助力阿里云原生升级
点击下载<不一样的 双11 技术:阿里巴巴经济体云原生实践> 作者 | 杨育兵(沈陵) 阿里巴巴高级技术专家 我们从 2016 年开始在集团推广全面的镜像化容器化,今年是集团全面镜像化容器 ...
- kafka 简单安装以及java小demo
文章目录 第1步,下载解压 kafka: 第2步,运行 kafka: 第3步,创建topic 第4步,生产者发送消息 第5步,消费者接收消息 使用 java 客户端 kafka 0.8.0版本demo ...
- java 多级图的最短路径
求最短路径众所周知有Dijistra算法.Bellman-ford等,除了这些算法,用动态规划也可以求出最短路径,时间复杂度为O(n^2), 跟没有优化的Dijistra算法一样(优化后的Dijist ...
- Centos7.6安装教程 && history设置显示执行命令的时间
一.规划磁盘使用空间(磁盘总大小200GB) /dev/sda1 mount /boot 1G mount point /dev/sda2 mount / 100G /dev/sda3 mount / ...
- CF1215D
CF1215D 两个整数的和是偶数,他们的差也是偶数 博弈好难啊qaq 我好zz啊qaq 如果M放最后一个M胜 现在和比较大的一边如果空位还多的话M胜 M可以通过在大的那边放9来消掉那边所有的空 由于 ...
- Java技术专区-虚拟机系列-类加载机制(类的初始化)
类加载的生命周期: 加载 -> 验证 -> 准备 -> 解析 -> 初始化 -> 使用 -> 卸载 加载 -> 验证 -> 准备 -& ...
- CentOS7 部署单节点 FastDFS
准备 环境 系统:CentOS7.5 软件即依赖 libfatscommon FastDFS分离出的一些公用函数包 FastDFS fastdfs-nginx-module FastDFS和nginx ...
- 【目录】Asp.NETCore轻松学系列
随笔分类 - Asp.NETCore轻松学系列 Asp.NETCore轻松学系列阅读指引目录 摘要: 耗时两个多月,坚持写这个入门系列文章,就是想给后来者更好更快的上手体验,这个系列可以说是从入门到进 ...
