发布日期:2013-02-25 15:41 来源:佚名 标签: 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%;
}


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

选择符多重声明

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

例如:

选择符名字
{
 声明1;
}

选择符名字
{
 声明2;
}

选择符名字
{
 声明3;
}
可以组合为:

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

div
{
 color:black;
}

div
{
 font-size:12px;
}
与下面的是等价的

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

选择符嵌套使用

下面例子的选择符只可以在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属性

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

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

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

等价于

div
{
 background:red;
}

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

 

相关评论

专题信息
    如果你开发web相关应用或者网站的话,肯定知道CSS对于页面布局的重要性。CSS最主要的目的是将文件的内容与显示分隔开来,有着许多的好处。如果你是初学者,那么就从我们的 CSS 入门基础教程开始吧,相信您肯定会受益良多的。