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. jmeter函数 助手

    Jmeter(一)——函数助手 __char:把一组数字转化成Unicode __counter:计数器,支持多线程(可以理解为多用户) 线程组设置为2个用户,循环两次${__counter(true ...

  2. 深度学习中的batch、epoch、iteration的含义

    深度学习的优化算法,说白了就是梯度下降.每次的参数更新有两种方式. 第一种,遍历全部数据集算一次损失函数,然后算函数对各个参数的梯度,更新梯度.这种方法每更新一次参数都要把数据集里的所有样本都看一遍, ...

  3. 网站升级HTTPS教程

    远程桌面连接工具 由于运营商的肆意劫持,越来越多的网站开始使用HTTPS协议,开启HTTPS会优待提升排名,我减少被劫持页面等等   现在越来越多的网站开始使用HTTPS协议,其实百度从2014年底就 ...

  4. [NOIP2017]逛公园 题解

    我连D1T3都不会我联赛完蛋了 题目描述 策策同学特别喜欢逛公园.公园可以看成一张 N 个点 M 条边构成的有向图,且没有 自环和重边.其中1号点是公园的入口, N 号点是公园的出口,每条边有一个非负 ...

  5. Jmeter 5.1 从excel读取数据执行接口自动化

    思路:数据在excel文件中进行维护,然后转换成csv格式,jme中读取数据执行: 1.将接口各数据在excel文件中进行维护,然后存为csv格式,我的数据如下: 2.jmeter脚本,配置csv文件 ...

  6. Reciting(third)

      It is subtly demonstrate in the portrayal that a teacher is teaching mathmatics in a certain class ...

  7. spring boot 尚桂谷学习笔记06 异常处理 ---Web

    ------错误处理机制------ 默认效果 1 返回一个默认的错误页面 浏览器发送请求的请求头:优先接收 text/html 数据 客户端则默认响应json数据 : accept 没有说明返回什么 ...

  8. 时间复杂度为n^2的排序

    时间复杂度为n^2的排序 冒泡排序和选择排序的共同点:每次都是在找剩下元素中最小(大)的元素 不同点:冒泡排序存在多次交换,而选择排序每次只存在一次交换序号 #include<iostream& ...

  9. spring注解开发:容器中注册组件方式

    1.包扫描+组件标注注解 使用到的注解如下,主要针对自己写的类 @Controller @Service @Repository @Component @ComponentScan 参考 spring ...

  10. MYSQL中常用的工具

    1.mysql(客户端链接工具):   -u :指定用户名   -p:指定密码   -h:指定服务器ip或者域名   -P(大写):指定端口  例子:mysql -u root -h 202.194. ...