网海天涯

id与class的层级使用方法
前面几节教程中，我分别向大家介绍了id与class的用法。如果大家对于id及class的用法仍有不懂的地方，请返回前几节，认真研习一下它们的用法。这节教程中，我将为大家介绍id与class的层级使用方法。

所谓的层级使用方法，就是把id与class层次化，我们先看下面的例子，然后再详情解释下层次化意思。

布局代码：
<div id="header">
 <div class="navigation">这是个用于放置导航菜单的层(div)</div>
</div>

样式代码：
#header {
width:850px;
height:270px;
border:2px solid red;
}
#header .navigation {
width:550px;
height:100px;
border:1px solid green;
}

我们先来看看布局代码中 div 的嵌套用法。在示例代码中，总共有两个div，第一个div是id为header，第二个div没有id，但它却有一个用以说明样式的class(类)，class的名称为navigation。那么，在样式代码中，我们自然要为这两个层定义它们的样式。#header {}的样式代码，大家已经见过很多遍了吧？我们主要看看.navigation类的样式定义方法。

#header .navigation { }

这种书写方法就是层次化的方法，它可以理解成：#header(id为header的页面元素)中所有class(类)为navigation的样式定义。或许有人会问到，为什么我们不直接用.navigation来定义样式呢。如果直接用.navigation来定义的话，那就变成这种意思了：所有class(类)为navigation的页面元素都采用的样式。

因此，当我们想要为header中navigation单独定义一种样式的时候，就会采用这种书写方法。下面再把示例的代码扩展一下，请看完这节教程的人仔细思考下上面刚才那段话的意思。

布局代码：
<div id="header">
 <div class="navigation">这是个用于放置导航菜单的层(div)</div>
</div>
<div class="navigation">这个class(类名)为navigation的层不再#header中哦！</div>

样式代码：
#header {
width:850px;
height:270px;
border:2px solid red;
}
#header .navigation {
width:550px;
height:100px;
border:1px solid green;
}

.navigation {
width:850px;
height:120px;
border:1px solid red;
}

如果对这节教程有什么不懂的话，请不要着急，后面的教程中，还将提及层次化方法的应用的。