分组
Grouping 分组
当许多选择器有同样属性时,可以使用逗号组合它们。
例子
h2 {color: red;}.thisOtherClass {color: red;}.yetAnotherClass {color: red;}
上面的可以写成这样:
h2, .thisOtherClass, .yetAnotherClass {color: red;}
Nesting 嵌套
如果结构良好,不需要使用很多class或ID选择器。这是因为可以设定选择器里面选择器的属性。
例子:
#top {background-color: #ccc;padding: 1em}#top h1 {color: #ff0;}#top p {color: red;font-weight: bold;}
如果你碰到下面这样的形式,记得处理掉你网页上的class或ID。
<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>
这是由于,通过使用空格分离选择器,我们可以设定IDtop
里面的h1
颜色为#ff0
,p
是red
和blod
。
这可能比较复杂,因为嵌套可以多级使用,所以需要多加练习。
可以看这里详细介绍IE7新支持的选择器