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;
}