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. configure: error: invalid variable name: `-prefix'

    configure: error: invalid variable name: `-prefix'其实就是写法的问题 正确写法 把prefix前面的"-"改成“--”

  2. Hive HiveQL基础知识及常用语句总结

    基础语句 CREATE DROP 建表.删表 建表 -------------------------------------- -- 1. 直接建表 ------------------------ ...

  3. inline-block 导致元素下沉 解决方法添加vertical-align:middle属性

    <div class="layui-input-block"> <input name="username" lay-verify=" ...

  4. vue入门例子

    vue入门例子 1.声明示渲染        {{message}} 2.绑定事件 v-bind 3.控制切换一个程序是否显示        v-if 4.渲染循环                  ...

  5. dir(dict)|字典的创建-添加-删除-修改-判断存在-取值等相关操作

    dir(dict) ####字典操作:创建-添加-删除-修改-判断存在-取值 #(一)创建字典: {} .等号. zip(). [(),()] #1.创建空字典 dict0 = {} #2.等号创建 ...

  6. Linux(二)—— Linux配置及指令

    目录 Linux配置及指令 一.linux中常用软件的安装 二.主机名和网络 1.修改主机名 2.设置网络 三.关闭防火墙 1.检查防火墙是否开启 2.清除策略 3.永久关闭第一个防火墙 4.关闭第二 ...

  7. UVA1632_Alibaba

    题目链接 大致题意:直线上面有n个点,第i个点坐标为xi,它会在di时间消失,你可以选择从任何位置出发,求访问完所有点的最短时间,无解输出no solution 思路:这有一个难点就是,不知道状态该怎 ...

  8. Gitlab CI持续集成 - GitLab Runner 安装与注册

    GitLab Runner安装 需要添加gitlab官方库: # For Debian/Ubuntu/Mint curl -L https://packages.gitlab.com/install/ ...

  9. fixture实战---通过fixure,解决方法依赖逻辑

    import pytest@pytest.fixture()def login(): print('输入用户名密码登陆') def test_cart(login): print('用例1,登陆后执行 ...

  10. C# 线程池的使用 终止线程池中的队列

    C#的线程池使用起来还是非常简单的,这里记录一下. 根据http://blog.csdn.net/chen_zw/article/details/7939834里的描述这里记录一下C#线程池的特点 一 ...