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. webpack打包工具简单案例

    目录结构: 入口文件:main.js 把项目所有的依赖文件都放进main.js //1.使用CommonJs的模块化规范 const {add, mul} = require('./mathUtil. ...

  2. 连载 3:利用 matlab计算卷积

  3. asd的甩锅计划

    asd的甩锅计划 时间限制: 1 Sec  内存限制: 128 MB提交: 177  解决: 19[提交][状态] 题目描述 大家对hdu上面的畅通工程系列一定很熟悉了吧.比如如下一段,就是畅通工程里 ...

  4. A Guide To using IMU (Accelerometer and Gyroscope Devices) in Embedded Applications.

    介绍 本指南的目的是大家感兴趣的惯性MEMS(微机电系统)传感器,特别是加速计和陀螺仪和IMU组合设备(惯性测量单元). 例如IMU单位:Acc_Gyro_6DOF对MCU处理单元UsbThumb提供 ...

  5. 在windows下用脚手架搭建vue环境

    做了几个月vue项目,最近两个项目使用脚手架搭建的,确实用脚手架搭建方便了许多,想想以前自己手配的时候,确实是... 1.在这之前我是默认你已经使用过vue的,也默认你已经安装了node.js 2.接 ...

  6. Day 56 jquery

    一 .事件委托实例 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset=&q ...

  7. 使用Bochs学习硬件原理

    什么是Bochs? 简单地说,Bochs是一款仿真软件,可以用软件的方式模拟硬件的工作.同类软件有Qemu,仿真软件与虚拟机(hypervisor)还不完全相同,仿真软件是完全软件模拟硬件,而虚拟机软 ...

  8. C++怎样通过嵌入汇编写一个函数

    参考:http://msdn.microsoft.com/en-us/library/h5w10wxs.aspx 普通的函数,Compiler会自动生成prologue和epilogue,但是通过在函 ...

  9. GHCi Prelude学习

    参考:http://www.cse.unsw.edu.au/~en1000/haskell/inbuilt.html http://www.cse.unsw.edu.au/~en1000/haskel ...

  10. Java并发Condition接口

    java.util.concurrent.locks.Condition接口提供一个线程挂起执行的能力,直到给定的条件为真. Condition对象必须绑定到Lock,并使用newCondition( ...