14.2. CSS选择符简写方式

下面介绍CSS选择符的几种简写方式

选择符分组

如果几个选择符有相同的声明，那么可以将它们组成用分号分隔的列表
选择符中最后一个声明后可不加分号

选择符名字1
{
	声明1;
	声明2;
}

选择符名字2
{
	声明1;
	声明2;
}

选择符名字3
{
	声明1;
	声明2;
}

可以组合为:

选择符名字1,选择符名字2,选择符名字3
{
	声明1;
	声明2;
}

示例

.dreamdudivwhite12px
{
	color:white;
	font-size:12px;
}

h1
{
	color:white;
	font-size:12px;
}

div
{
	color:white;
	font-size:12px;
}

与下面的是等价的

.dreamdudivwhite12px,h1,div
{
	color:white;
	font-size:12px;
}

如果想把标题1(h1)至标题6(h6)的字体颜色全部显示为红色,并且带有下划线.

h1,h2,h3,h4,h5,h6 
{
	color: red;
	text-decoration: underline;
}

h1
{
	font-size:220%;
}

h2
{
	font-size:200%;
}

h3
{
	font-size:180%;
}

h4
{
	font-size:160%;
}

h5
{
	font-size:140%;
}

h6
{
	font-size:120%;
}

CSS选择符简写方式示例 -- 可以尝试编辑

CSS选择符简写方式示例，简写方式节省代码

另一个例子(全部为蓝色,并且字体加重):

p, .name1, #name2 
{
	color: blue;
	font-weight: bold;
}

CSS选择符简写方式示例 -- 可以尝试编辑

CSS选择符简写方式，另外一个例子

选择符多重声明

一个选择符有多个声明，可以将多个声明组成以分号分隔的组

例如：

选择符名字
{
	声明1;
}

选择符名字
{
	声明2;
}

选择符名字
{
	声明3;
}

可以组合为：

选择符名字
{
	声明1;
	声明2;
	声明3;
}

示例

div
{
	color:black;
}

div
{
	font-size:12px;
}

与下面的是等价的

div
{
	color:black;
	font-size:12px;
}

引用网址：http://www.dreamdu.com/css/selector_optimization/

选择符嵌套使用

下面例子的选择符只可以在copyright选择符内使用

#copyright 
{
	background-color: #000;
}

#copyright h1 
{
	color: white;
}

#copyright p 
{
	color: #fff;
	font-weight: bold;
	font-size: 12px;
}

<div id="copyright">
        <h1>精彩的CSS教程!</h1>
        <p>Copyright &copy; 2004-2008 梦之都(www.dreamdu.com)</p>
        <p>All rights reserved.</p>
</div>

嵌套选择符就是CSS包含选择符，后面的章节将详细介绍CSS包含选择符

CSS选择符简写方式示例 -- 可以尝试编辑

CSS选择符简写方式，嵌套选择符

缩写属性

某些属性是缩写属性，这些缩写属性可以一次设置多个CSS属性

例如，background属性是缩写属性，它可以一次设置background-color、background-image、background-repeat、background-attachment、background-position的属性值。

在缩写属性中如果有一些值被省略，那么被省略的属性就被赋予其初始值

div
{
	background-color:red;
	background-image:none;
	background-repeat:repeat;
	background-repeat:0% 0%;
	background-attachment:scroll;
}

等价于

div
{
	background:red;
}

CSS中的选择符很多都和HTML元素的并列和嵌套顺序有关,下面一节介绍HTML元素的并列与嵌套关系

From "CSS选择符简写方式 - CSS选择符 - CSS教程"

向上 / 上一页 / 下一页 / 教程列表