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选择符简写方式示例 -- 可以尝试编辑

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

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

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-<?php echo date("Y"); ?> 梦之都(www.dreamdu.com)</p>
    <p>All rights reserved.</p>
</div>

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

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

缩写属性

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

例如,background属性是缩写属性,它可以一次设置background-colorbackground-imagebackground-repeatbackground-attachmentbackground-position的属性值。

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

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

等价于

div
{
	background:red;
}

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



  • 教程中有什么不懂的地方?发现教程的错误!对教程有什么建议!快快联系猴子呀dreamdu@163.com,:)
赞助梦之都