常常我们的CSS 样式中会有好几个地方需要使用到相同的设定时,一个一个分开写会是一件满累人的工作,重覆性太高且显得冗长,更不好管理....在CSS 语法的基本设定中,就可以把这几个相同设定的选择器合并在一起,原本可能是写了7~8 行相同的语法,合在一起后就只要短短的一小行,怎么看都让人心旷神怡啊~

例如:当有好几个选择器刚好都需要把文字的颜色设定为灰色的时候,一个一个分开写的方法式,感觉就很繁琐,如下:

 h1 { color:#; }
h2 { color:#; }
h3 { color:#; }
h4 { color#; }
ul { color:#; }
p { color:#; }
#AAA { color:#; }
#BBB { color:#; }

群组化:把这几个选择器使用逗号合并在一起,就只要短短的一小行,如下:

h1, h2, h3, h4, ul, p, #AAA, #BBB { color:#; } 

使用「群组化」选择器 可以使我们的CSS 样式变得比较简洁,将来又好管理和方便修改,这种写法是CSS 语法最基础的功能之一,只要把这一些基础的用法都熟悉了,同学们自然而然就可以练出漂亮的CSS 样式喽~

CSS基础教程:群组化选择器的更多相关文章

  1. CSS基础教程 -- 媒体查询屏幕适配

    响应式布局 Media Query 的使用方法 在上例中, 我们使用Media Queries来根据3种不同尺寸的窗口使用3种不同的样式.通过不同的媒体类型和条件定义样式表规则,媒体查询让CSS可以更 ...

  2. css 基础教程学习

    css基础语法 css语法 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明. 选择器通常是您需要改变样式的 HTML 元素. 每条声明由一个属性和一个值组成. 如果要定义不止一个声明,则 ...

  3. HTML+CSS基础知识(2)选择器的使用、盒子模型的讲解、列表的使用

    文章目录 1.CSS基础知识 2.css样式 2.1.代码: 2.2 测试结果 3.CSS的语法 3.1 代码 4.块元素和行内元素 4.1 代码 4.2 测试结果 5.常用的选择器 5.1 代码块 ...

  4. 【HTML XHTML CSS基础教程(第6版)】笔记之CSS笔记(7~25章)

      第7章 CSS构造块   1.在样式表中添加注释 /*内容*/   2.CSS颜色 rgb(红,黄,蓝) 这三个参数可以用百分号:rgb(35%,0%,50%); 也可以用数字,如上代码就相当于r ...

  5. CSS基础(三):选择器

    常用选择器 元素选择器,即html标记如div,ul,li,p,h1~h6,table等. p { font-size:14px; } h1 { color:#F00; } 复合选择器, 由两个选择器 ...

  6. CSS基础知识笔记(二)之选择器

    CSS选择器 选择器{ 样式; } 每一条css样式声明(定义)由两部分组成,形式如下: 在{}之前的部分就是“选择器”,“选择器”指明了{}中的“样式”的作用对象,也就是“样式”作用于网页中的哪些元 ...

  7. CSS基础知识点(二)——选择器

    在这一篇中,主要总结一下CSS中的选择器. 参考:http://www.cnblogs.com/webblog/archive/2009/07/07/1518274.html CSS中的选择器主要包括 ...

  8. css3基础教程十三征服CSS3选择器

    :enabled选择器 在Web的表单中,有些表单元素有可用(“:enabled”)和不可用(“:disabled”)状态,比如输入框,密码框,复选框等.在默认情况之下,这些表单元素都处在可用状态.那 ...

  9. div+css基础教程

    本文存下来作为备忘. 第一节  了解div+css 一.什么是div+css div元素是html(超文本语言)中的一个元素,是标签,用来为html文档内大块(block-level)的内容提供结构和 ...

随机推荐

  1. RocketMQ补偿方案架构设计

    RocketMQ作为消息中间件,在系统异步化架构中,应用非常广泛.但是我们在享用RocketMQ的同时,也不能百分百完全信赖它.一旦RocketMQ崩溃了,给我们业务带来的也将是毁灭性打击. 因此,我 ...

  2. tiger-complier 问题记录 类型检查

    1 注意区分 Ty_xxx 和 a_ 的区别 A 开头是对应的是原程序中的一个实体 Ty _ 开头则是类型检查中的一个抽象类 代表了一类实体 比如 A_recordTy 是原程序中的 type per ...

  3. HTML5定位功能,实现在百度地图上定位

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. HZOI20190906模拟38 金,斯诺,赤

    题面:https://www.cnblogs.com/Juve/articles/11479415.html T1:高精度gcd,其实不用写高精度取模,gcd还有一种求法 int gcd(int a, ...

  5. ROS urdf和xacro文件详解

    视觉标签:visual <visual> <origin xyz="0.0 0.0 0.0" /> <geometry> <box siz ...

  6. 查找IE中网页的源代码

    一般我们在查看网页的源代码时,在网页上右键就能点击“查看源代码”.但是有些网页的右键功能被屏蔽了.这时候我们可以在ie菜单栏的“查看”选项里“源”查找. 如果发现ie菜单没在的话,点击键盘上的“Alt ...

  7. css 始终显示滚动条,内容超出显示有滑块的滚动条,内容没有超出显示空的滚动条

    1.内容没有超出显示空的滚动条 <div class="div1"> 前端开发者前端开发者前端开发者前端开发者前端开发者 </div> css代码: .di ...

  8. python3没有了xrange

    升级到python3的同学应该会注意到以前经常用的xrange没了! 是的,python3的range就是xrange.直接看效果!   Python 2.7.13 (v2.7.13:a06454b1 ...

  9. TZOJ 5962 Happy Matt Friends(计数DP)

    描述 Matt hzs N friends. They are playing a game together. Each of Matt’s friends has a magic number. ...

  10. Leetcode496.Next Greater Element I下一个更大的元素1

    给定两个没有重复元素的数组 nums1 和 nums2 ,其中nums1 是 nums2 的子集.找到 nums1 中每个元素在 nums2 中的下一个比其大的值. nums1 中数字 x 的下一个更 ...