你不必重复有相同属性的多个选择符,你只要用英文逗号(,)隔开选择符就可以了。
比如,你有如下的代码:
h2 {color: red;}.thisOtherClass {color: red;}.yetAnotherClass {color: red;}
则你可以这样写:
h2, .thisOtherClass, .yetAnotherClass {color: red;}
嵌套
CSS结构好的话,没有必要使用过多的类或者标识选择符。这是因为你可以指定在选择符内的选择符。(或者更好的说法,上下文选择符--译者著)
比如:
#top {background-color: #ccc;padding: 1em}#top h1 {color: #ff0;}#top p {color: red;font-weight: bold;}
这就减去不必要的类或者标识选择符,如果应用到像这样的HTML中:
<div id="top"><h1>Chocolate curry</h1><p>This is my recipe for making curry purely with chocolate</p><p>Mmm mm mmmmm</p></div>
这是因为,用英文半角空格间隔选择符,我们指明了在标识id内的h1有“#ff0”的颜色,而p则是红色red和粗体bold。
这可能也会有些复杂(因为可能不止两级,比如在内在内在内在内等等)。你有必要多加练习。
延伸阅读
- CSS初级指南的标签、属性和元素
- 类class和标识id选择符──不用粘在后面的小胶片,你就可以制做属于你自己的选择符!
- ------------------------------------------------------------------------------------
- 伪类──定义连接选择符的多种状态。
- 快捷属性──很多属性,比如边框border和边界margin都可以把其他方向的属性组合在一起。
- 背景图片──猜猜看。
