div邏輯區(qū)

• 在頁面中使用<div>可以將頁面分解為邏輯區(qū)，保證了結(jié)構(gòu)清晰并便于指定樣式。

div的使用代碼示例如下：

<div id="fav">  //屬性說明邏輯區(qū)
    <div id="color">             //顏色邏輯區(qū)
      <h3>my favorite color:</h3>
     <ol>
      <li>red</li>
      <li>blue</li>
      <li>orange</li>
    </ol>
   </div>
   <div id="city">           //訪問城市邏輯區(qū)
    <h3>the cities i have visited:</h3>
    <ul>
     <li>tianjin</li>
     <li>beijing</li>
     <li>qingdao</li>
   </ul>
  </div>
</div>

• 子孫的選擇

選擇邏輯區(qū)的某些元素的子孫元素，使用示例如下：

#fav h3{
   color:black;
}

說明：（該規(guī)則選擇了id為fav的<div>所有子孫h3元素）
fav:父元素
h3:子孫元素

span邏輯分組

• 利用<span>可以創(chuàng)建內(nèi)聯(lián)字符和元素的邏輯分組

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的區(qū)別

em結(jié)構(gòu)用來強(qiáng)調(diào)某些文字，strong結(jié)構(gòu)用來強(qiáng)調(diào)一個(gè)重點(diǎn)。而span只是用來改變某些文字的樣式

偽類

• 偽類的運(yùn)用

例如對(duì)于a元素來說會(huì)有3個(gè)狀態(tài)：未訪問，已訪問，懸停在鏈接上方。則可以對(duì)不同的狀態(tài)設(shè)置不同的屬性。示例代碼如下：

a:link{   //未訪問
  color: green;
}
a:visited{   //已訪問
  color: red;
}
a:hover{    //懸停于鏈接上方
  color:yellow;
}