CSS选择器分组的三种方法
来源:互联网 发布:每组数据分页 编辑:程序博客网 时间:2024/05/21 07:14
一、选择器分组的三种方法
- 选择器分组
- 声明分组
- 选择器和声明的结合分组
1、选择器分组
假设希望 h2元素和段落都有灰色。为达到这个目的,最容易的做法是使用以下声明:
h2,p{color:gray;}/*其中,h2,p为选择器,括号中的属性为声明*/
将 h2 和 p 选择器放在规则左边,然后用逗号分隔,就定义了一个规则。其右边的样式(color:gray;)将应用到这两个选择器所引用的元素。逗号告诉浏览器,规则中包含两个不同的选择器。如果没有这个逗号,那么规则的含义将完全不同。参见后代选择器。可以将任意多个选择器分组在一起,对此没有任何限制。
提示:通过分组,创作者可以将某些类型的样式“压缩”在一起,这样就可以得到更简洁的样式表。分组其实是将具有相同样式的各个选择器组合在一起同时定义,其效果和每个元素分开定义一样,其定义方法不唯一。
附:通配符选择器。CSS2 引入了一种新的简单选择器 - 通配选择器(universalselector),显示为一个星号(*)。该选择器可以与任何元素匹配,就像是一个通配符。
例如,下面的规则可以使文档中的每个元素都为红色:
*{color:red;}/*这个声明等价于列出了文档中所有元素的一个分组选择器。利用通配选择器,只需敲一次键(仅一个星号)就能使文档中所有元素的 color 属性值指定为 red*/
2、声明分组
假设您希望所有 h1元素都有红色背景,并使用 28像素高的 Verdana 字体显示为蓝色文本,可以写以下样式:
h1{font:28px Verdana;}h1{color:blue;}h1{background:red;}
但是上面这种做法的效率并不高。尤其是当我们为一个有多个样式的元素创建这样一个列表时会很麻烦。相反,我们可以将声明分组在一起:
h1{font:28px Verdana;color:blue;background:red;}
注意,对声明分组,一定要在各个声明的最后使用分号,这很重要。浏览器会忽略样式表中的空白符。
与选择器分组一样,声明分组也是一种便利的方法,可以缩短样式表,使之更清晰,也更易维护。
提示:在规则的最后一个声明后也加上分号是一个好习惯。在向规则增加另一个声明时,就不必担心忘记再插入一个分号。
3、选择器和声明的结合分组
我们可以在一个规则中结合选择器分组和声明分组,就可以使用很少的语句定义相对复杂的样式。其实质上就是将用于相同声明的样式的选择器都写在一起,同时定义。
下面的规则为所有标题指定了一种复杂的样式:
h1,h2,h3,h4,h5,h6{color:gray;background:white;padding:10px;border:1px solid black;font-family:Verdana;}/*带有白色背景的灰色文本,其内边距是 10 像素,并带有 1 像素的实心边框,文本字体是 Verdana*/
阅读全文
1 0
- CSS选择器分组的三种方法
- css选择器的分组的方法
- CSS选择器的分组
- css的三种选择器
- CSS的三种选择器
- css三种选择器
- CSS的三种扩展选择器
- div+css 选择器分组 属性选择器 css插入方法 css背景属性
- 三种字符串分组相加的方法
- CSS三种扩展选择器
- css分组合嵌套选择器
- html中css三种常见的样式选择器
- HTML 中CSS三种常见的样式选择器
- 嵌入css 的三种方式和css3 选择器
- CSS——CSS的三种书写方式 CSS选择器
- CSS中的三种基础选择器,
- HTML常用标记、CSS三种选择器
- 【CSS笔记三】CSS选择器
- 矩阵的基本功能 SCALA实现
- Docker 学习应用篇之二: Docker的介绍和安装
- Java中spring读取配置文件的几种方法
- 计算三点的坐标
- Sublime 复制当前行到下一行快捷键
- CSS选择器分组的三种方法
- 解决editplus编译出现乱码
- easyUi--Uploadify文件上传
- LeetCode ——37. Sudoku Solver
- http 请求步骤 粗浅理解
- TFS统计编码行数语句
- 设计模式之外观模式
- 入门训练 序列求和
- 实战项目心得