新手必读之CSS中级教程 2、组合与嵌套──给多个选择符或者在选

新手必读之CSS中级教程 内容来自dedecms

2、组合与嵌套──给多个选择符或者在选择符内的选择符赋值组合

  copyright dedecms

你不必重复有相同属性的多个选择符,你只要用英文逗号(,)隔开选择符就可以了。

copyright dedecms

比如,你有如下的代码: copyright dedecms

 

织梦内容管理系统

h2 {

织梦内容管理系统

color: red;

内容来自dedecms

} 织梦内容管理系统

.thisOtherClass { 内容来自dedecms

color: red;

copyright dedecms

} dedecms.com

.yetAnotherClass { copyright dedecms

color: red;

本文来自织梦

}

copyright dedecms

  织梦内容管理系统

则你可以这样写: 内容来自dedecms

 

织梦内容管理系统

h2, .thisOtherClass, .yetAnotherClass {

织梦好,好织梦

color: red;

织梦好,好织梦

} 内容来自dedecms

 

本文来自织梦

嵌套 织梦好,好织梦

 

内容来自dedecms

CSS结构好的话,没有必要使用过多的类或者标识选择符。这是因为你可以指定在选择符内的选择符。(或者更好的说法,上下文选择符--译者著)

本文来自织梦

比如: 织梦内容管理系统

 

织梦内容管理系统

#top {

本文来自织梦

background-color: #ccc;

织梦好,好织梦

padding: 1em

内容来自dedecms

}

copyright dedecms

#top,h1 {

内容来自dedecms

color: #ff0;

织梦内容管理系统

}

copyright dedecms

#top,p {

copyright dedecms

color: red; dedecms.com

font-weight: bold; 本文来自织梦

}

copyright dedecms

  织梦好,好织梦

这就减去不必要的类或者标识选择符,如果应用到像这样的HTML中:

copyright dedecms

  织梦内容管理系统

<div id="top">

织梦内容管理系统

<h1>Chocolate curry</h1> dedecms.com

<p>This is my recipe for making curry purely with chocolate</p> 织梦内容管理系统

<p>Mmm mm mmmmm</p>

织梦好,好织梦

</div> 织梦内容管理系统

 

内容来自dedecms

这是因为,用英文半角逗号隔选择符,我们指明了在标识id内的h1有“#ff0”的颜色,而p则是红色red和粗体bold。 copyright dedecms

这可能也会有些复杂(因为可能不止两级,比如在内在内在内在内等等)。你有必要多加练习。

本文来自织梦