div逻辑区

• 在页面中使用<div>可以将页面分解为逻辑区，保证了结构清晰并便于指定样式。

div的使用代码示例如下：

<div id="fav">  //属性说明逻辑区
    <div id="color">             //颜色逻辑区
      <h3>my favorite color:</h3>
     <ol>
      <li>red</li>
      <li>blue</li>
      <li>orange</li>
    </ol>
   </div>
   <div id="city">           //访问城市逻辑区
    <h3>the cities i have visited:</h3>
    <ul>
     <li>tianjin</li>
     <li>beijing</li>
     <li>qingdao</li>
   </ul>
  </div>
</div>

• 子孙的选择

选择逻辑区的某些元素的子孙元素，使用示例如下：

#fav h3{
   color:black;
}

说明：（该规则选择了id为fav的<div>所有子孙h3元素）
fav:父元素
h3:子孙元素

span逻辑分组

• 利用<span>可以创建内联字符和元素的逻辑分组

span使用代码示例如下：

    <ul>
     <li><span class="position">wudadao</span>,<span class="city">tianjin</span></li>
     <li><span class="position">changcheng</span>,<span class="city">beijin</span></li>
     <li><span class="position">badaguan</span>,<span class="city">qingdao</span></li>
   </ul>

指定span样式：

.position{
   font-style:italic;
}

• span与em，strong的区别

em结构用来强调某些文字，strong结构用来强调一个重点。而span只是用来改变某些文字的样式

伪类

• 伪类的运用

例如对于a元素来说会有3个状态：未访问，已访问，悬停在链接上方。则可以对不同的状态设置不同的属性。示例代码如下：

a:link{   //未访问
  color: green;
}
a:visited{   //已访问
  color: red;
}
a:hover{    //悬停于链接上方
  color:yellow;
}