這可能是一個(gè)非常簡(jiǎn)單的問(wèn)題，但是今天花一點(diǎn)點(diǎn)時(shí)間把這個(gè)簡(jiǎn)單的問(wèn)題在說(shuō)清晰一點(diǎn)，相信大家對(duì)ＣＳＳ的學(xué)習(xí)和認(rèn)識(shí)會(huì)很有幫助，強(qiáng)化一些概念的東西，對(duì)以后的工作效率的提高是很有裨益的。

　　我們看過(guò)一些樣式表文件的樣式名都寫的很長(zhǎng)，比如：body #header .topbar.logo{...}，這是因?yàn)槔昧嗽氐睦^承關(guān)系，利用元素名，或者ＩＤ名和類名（也就是class名）來(lái)精確定位和描述某一個(gè)區(qū)域的css樣式表格式。

　　初學(xué)樣式表的人肯定會(huì)說(shuō)，我要精確定位一個(gè)區(qū)域的樣式表，用一個(gè)class名不就可以嗎，還需要這么麻煩嗎？這話說(shuō)的沒錯(cuò)，做只有幾個(gè)頁(yè)面的小網(wǎng)頁(yè)，也確實(shí)不用這么麻煩，但是當(dāng)你規(guī)劃一個(gè)大型網(wǎng)站的時(shí)候，你就肯定要利用web元素的繼承關(guān)系，按照從大區(qū)域到小區(qū)域的次序來(lái)寫ＣＳＳ文檔。這就就象畫畫一樣，學(xué)過(guò)繪畫的朋友，都知道，畫素描都是先打型然后在鋪大色調(diào)，最后是深入刻畫。ＣＳＳ文檔也是，確定大區(qū)域的結(jié)構(gòu)，然后在深入繼承和規(guī)劃。

　　好了，言歸正傳，今天要講的是ＣＳＳ樣式表中繼承關(guān)系的空格與不空格的問(wèn)題。先看下面的一個(gè)例子：

這是我的ＣＳＳ文件：

<style type="text/css">
td .a{
color: #006600}
td.b{
color: #FF0000}
</style>

這是我的body元素里的代碼：

<table>
  <tr>
    <td class="b">
  <div>
        <ul class="a">
  <li>這里是標(biāo)簽"li"</li>
  </ul>
        </div>

</td>

  </tr>
</table>

　　在ＣＳＳ文件里td后面跟著的class名是 a 和 b ,a里面我定義的字體顏色是綠色，b里面我定義的字體顏色是紅色．現(xiàn)在我要說(shuō)的是，這兩個(gè)樣式表寫法都是正確的，類名b沒有空格連著元素<td>，而類名a有空格接著元素<td>，運(yùn)行此代碼，你發(fā)現(xiàn)頁(yè)面顯示字體為綠色，這說(shuō)明頁(yè)面讀取了樣式表td空格a的內(nèi)容，由此我們可以推斷，頁(yè)面樣式表文件是按照頁(yè)面元素由里到外的次序來(lái)讀取的，取近舍遠(yuǎn)的原則。

　　如果我們把樣式表td空格a的空格去掉，你會(huì)發(fā)現(xiàn)，現(xiàn)在頁(yè)面字體的顏色是讀取的樣式表b里的內(nèi)容，字體變?yōu)榧t色的了。這說(shuō)明了不空格的樣式表寫法是針對(duì)在當(dāng)前所在元素內(nèi)而定的，(因?yàn)樵陧?yè)面td元素代碼里我們只有寫class=b，而沒有a，所以a樣式表的內(nèi)容將不在頁(yè)面中表現(xiàn)出來(lái)),而有空格的樣式表寫法是繼承了當(dāng)前元素內(nèi)某個(gè)元素而定，通過(guò)反復(fù)的幾次測(cè)試，繼承的層級(jí)至少是一個(gè)層級(jí)以上就可以了，具體沒有嚴(yán)格的規(guī)定。

　　相信看到這里，大家對(duì)樣式表空格與不空格的關(guān)系已經(jīng)有了一點(diǎn)認(rèn)識(shí)，希望在以后的學(xué)習(xí)中與大家共勉。如有不正之處，還望包涵，指點(diǎn)！我也只是在工作學(xué)習(xí)中領(lǐng)悟點(diǎn)認(rèn)識(shí)與大家分享。高手請(qǐng)勿見笑。

最新評(píng)論