www.baike369.com
百科369 > CSS教程 > CSS的分组书写规则

CSS的分组书写规则


CSS的分组书写规则

利用分组书写规则,可以大大增加CSS的灵活性。例如,要使多个元素拥有相同的样式,或者使不同的样式应用于一个或者一组元素,还有针对浏览器的Bug使用的Hack等。


CSS分组选择器

如果要对不同的选择器设定相同的CSS,例如,设置<h2>、<h3>、<p>和<ul>等元素的前景色为红色,一般的书写格式如下:

h2{color:red;}
h3{color:red;}
p{color:red;}
ul{color:red;}

这样书写无疑很繁琐,因此可以使用分组选择器的书写方式将其合并,代码格式如下:

h2,h3,p,ul{color:red;}

为了代码清晰,也可以分行书写。代码格式如下:

h2,
h3,
p,
ul{
color:red;
}

不同的选择器前后顺序没有区别。例如:

h2,h3,p,ul{color:red;}
p,ul,h3,h2{color:red;}

上面两行CSS规则的效果是相同的。


CSS分组声明

当对于一个选择符有多条声明时,可以分开书写。例如:

p{font-size:14px}
p{color:red}

也可以像选择器那样合并成组书写,而每条声明间用英文分号“;”分隔。如下所示:

p{font-size:14px;color:red;}

为了使样式更加易于阅读,一般将每条声明写在一个新行内。如下所示:

p{
font-size:14px;
color:red;
}

最后一条声明可以没有分号,但是为了以后修改方便,一般也加上分号。


CSS综合应用

分组书写增加了CSS的灵活性,同时可以减少代码的冗余,例如下面的代码:

p{color:red;line-height:200%;text-align:center;}
ul{color:red;line-height:200%;}

这两组规则的大部分声明是相同的,只有少部分不同,因此可以将相同的声明分组书写,然后再对不同的部分单独书写。如下所示:

p,ul{color:red;line_height:200%;}
p{text-align:center;}
Copyright© 2011-2016 www.baike369.com All Rights Reserved