CSS基础教程:群组化选择器

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

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


1 h1 { color:#666666; }
2 h2 { color:#666666; }
3 h3 { color:#666666; }
4 h4 { color#666666; }
5 ul { color:#666666; }
6 p { color:#666666; }
7 #AAA { color:#666666; }
8 #BBB { color:#666666; }

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

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

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

时间: 2024-10-08 13:35:44

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

HTML/CSS基础教程 二

表 表是十分有用的,用它存储表状的数据更易于阅读.当你想用行列来显示信息时---你猜到了,<table>标签正是你需要的,有许多和表有关的标签,它们都以<table>开始. 表就是将一组数据用行列的形式排列,我们用<tr>标签创建一个表行(table row),<td>标签表示表数据(table date) <!DOCTYPE html> <html> <head> <title>Table Time</

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

响应式布局 Media Query 的使用方法 在上例中, 我们使用Media Queries来根据3种不同尺寸的窗口使用3种不同的样式.通过不同的媒体类型和条件定义样式表规则,媒体查询让CSS可以更精确作用于不同的媒体类型和同一媒体的不同条件.媒体查询的大部分媒体特性都接受min和max用于表达"大于或等于"和"小与或等于".如:width会有min-width和max-width媒体查询可以被用在CSS中的@media和@import规则上,也可以被用在HTML

w3school CSS基础教程

一.基础法则: 类名的第一个字符不能使用数字,否则无法在Firefox中起作用: 不要在属性值和单位之间留空格,否则在Firefox或Netscape中无法正常工作. 二.背景(background): background-color不能继承,默认值是transparent.若一个元素未指定背景色,其背景为透明,其祖先元素的背景则可见,由此显现出来: background-position中若只出现一个关键字,则默认另一个是center:若只提供一个百分数,所提供的值作为水平值,垂直值默认为5

HTML/CSS基础教程 六

表单 包含表单元素的区域, 表单元素是允许用户在表单中(文本框, 下拉列表, 单选框, 复选框等)输入信息的元素, 使用<form>标签定义. 文本域与密码域 <form> Username: <input type="text" name="firstname"> <br /> Password: <input type="password" name="lastname"

CSS基础教程——纯CSS开发的气泡式提示框

本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍:CSS基础教程 —— 纯CSS开发的气泡式提示框 作为前端开发人员,我们都熟悉使用CSS来生成页面上丰富的样式,对于边框border属性来说,也是我们最熟悉不过的CSS属性,今天我们这里将介绍如何使用纯CSS来生成一个气泡式样的提示框,希望大家喜欢! 在这篇文章中我们将使用:after伪标签来生成提示框的指示箭头. 首先我们定义提示框相关属性,我们添加了box阴影和文字阴影效果,这样让提示框更加漂亮: /* bubble */.tip

css基础教程:对css代码精简

在进行web前端项目开发(http://www.maiziedu.com/course/web/)时,会对css代码进行精简,减少代码冗余,提高网页加载速度,也比较方便后期的维护,下面一起看看对css代码精简的方法: 使用简写属性及默认值 .header { margin-top: 10px; margin-right: 20px; margin-bottom: 30px; margin-left: 40px; } /* 可以使用简写属性 margin */ .header { margin:

css 基础教程学习

css基础语法 css语法 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明. 选择器通常是您需要改变样式的 HTML 元素. 每条声明由一个属性和一个值组成. 如果要定义不止一个声明,则需要用分号将每个声明分开. 高级语法 1,选择器的分组 你可以对选择器进行分组,这样,被分组的选择器就可以分享相同的声明.用逗号将需要分组的选择器分开. 2,继承 body { font-family: Verdana, sans-serif; } 根据上面这条规则,站点的 body 元素将使用 V

CSS基础学习四:元素选择器

在上一篇的博客中我们已经熟悉CSS语法,对于CSS代码格式也有了一些认识.下面我就来说一下CSS代码式: 选择器名称 { 属性名:属性值:属性名:属性值:......} 属性与属性之间用分号隔开:属性与属性值直接使用冒号连接:如果一个属性有多个属性值的话,那么多个属性值用空格隔开. 上述提到了我这一篇博客所要说的主题,就是选择器.选择器就是指定CSS语法要作用的标签,那个标签的名称 就是选择器. 基本的选择器可分为三种: a)html标签名选择器:使用的是html的标签名,又叫元素选择器. b)

CSS基础学习七:属性选择器

CSS语法中,对带有指定属性的 HTML 元素设置样式.可以为拥有指定属性的 HTML 元素设置样式,而不仅限 于 class 和 id 属性.(注释:Internet Explorer 7 (以及更高版本)在规定了 !DOCTYPE 的情况下支持属性选择器. IE6 及更低的版本不支持属性选择器.) CSS2引入了属性选择器.属性选择器可以根据元素的属性及属性值来选择元素. 一简单属性选择器 如果希望选择有某个属性的元素,而不论属性值是什么,可以使用简单属性选择器. (1)先来一个简单的例子: