以前我接受了網(wǎng)上不少博文的說法，一直認(rèn)為學(xué)習(xí)css的三大最重要問題是：盒模型、定位、浮動。因為這三塊的內(nèi)容決定了css布局的能力.xhtml要實現(xiàn)和css的解耦，就要盡量不依賴于css（或者說不要純粹為了給css預(yù)留接口而添加不必要的class和id），那么，在用css布局之前，其實就有一個更緊迫的任務(wù)擺在我們的面前——如何將css規(guī)則準(zhǔn)確應(yīng)用到目標(biāo)元素。于是，css選擇符的地位在這個前提下就空前的提高了。所以，在開始學(xué)習(xí)盒模型、浮動、定位之前，有必要回顧一下選擇符。

 

一般稍微接觸過css的網(wǎng)頁設(shè)計人員，都會很快地學(xué)會三種css選擇符：

• 元素選擇符（例如：body 、a 、li ）
• ID選擇符（例如：#head、#body、#foot）
• 類選擇符（例如：.red、.item、.content）

更進(jìn)一步之后，開始了解到一些進(jìn)階的選擇符：

• 后代選擇符（例如 #head .menu、#foot #copyright）
• 偽類選擇符（例如 a:hover、a:link）

以及由這些選擇符組合起來形成的綜合選擇符。實際上css還支持一些更豐富的選擇符。但是能夠被瀏覽器廣泛支持的其實主要就是上面這幾種，其它的選擇符在css中往往用來區(qū)別處理不同的瀏覽器，或者用在jQuery一類的框架中。本文就不提了。有興趣的可以自己在網(wǎng)上查一下，像屬性選擇符（input[type=’password’]、input[type=’radio’]）、直接后代選擇符（body > div、 #head > ul）等。

實際上，有了上面列出的五種主要的選擇符，通過對它們的組合，已經(jīng)能夠滿足我們絕大部分時候的要求了，這也就意味著，相同結(jié)構(gòu)下的元素，父級元素或者祖先元素只要有一點(diǎn)點(diǎn)區(qū)別，我們就能夠在不借助id或者class的情況下直接訪問到。例如：

<ul>
  <li><a href="#">菜單1</a>
    <ul>
      <li><a href="#">菜單1-1</a></li>
      <li><a href="#">菜單1-2</a></li>
      <li><a href="#">菜單1-3</a></li>
    </ul>
  </li>
  <li><a href="#">菜單2</a>
    <ul>
      <li><a href="#">菜單2-1</a></li>
      <li><a href="#">菜單2-2</a></li>
      <li><a href="#">菜單2-3</a></li>
    </ul>
  </li>
</ul>

在那個示例中，沒有使用任何的class或者id，但是我們通過不同優(yōu)先級的元素+后臺選擇符，對結(jié)構(gòu)中的不同層次的ul、li、a實現(xiàn)了精確定位。如下面的代碼：

ul {}
li {}
ul ul {}
ul ul li {}
li a {}
ul li a {}
ul li:hover ul {}

那么，在實際開發(fā)中，為什么很多網(wǎng)頁設(shè)計人員還是離不開多如牛毛的ID和class呢（我要聲明一下，我從來沒有說完全拋棄id和class，我的觀點(diǎn)是他們應(yīng)該盡量少，并且由文檔結(jié)構(gòu)決定而不是由css需要決定）？我覺得有三方面的原因：

第一、xhtml文檔結(jié)構(gòu)不合理，通過元素不能體現(xiàn)文檔的層次結(jié)構(gòu)。滿篇都是div。沒有有效利用Hx系列標(biāo)簽和ul、ol、dl等不同含義的列表標(biāo)簽、沒有有效利用p、quote、pre等標(biāo)簽。xhtml為我們提供了豐富的標(biāo)簽元素，但是如果我們只會用div，那還不如人家用table來布局的。至少他的table在一定程度上也是文檔結(jié)構(gòu)的體現(xiàn)，而滿篇嵌套的div，文檔結(jié)構(gòu)完全沒體現(xiàn)。

第二、css選擇符掌握得不夠，不善于借助文檔結(jié)構(gòu)層次上的細(xì)微區(qū)別，用不同的組合選擇符來區(qū)別相似但其實不同的元素。例如上面的下拉菜單結(jié)構(gòu)，有的人就非要用“menu”和“submenu”來區(qū)別。

第三、css選擇符的優(yōu)先級不清楚。css是支持繼承和覆蓋的，什么時候繼承，什么時候覆蓋。兩條規(guī)則都對相同元素做出了樣式規(guī)定而且樣式規(guī)定重復(fù)的情況下，哪一條規(guī)則會被應(yīng)用呢？這些問題不清楚，就沒辦法充分利用優(yōu)先級實現(xiàn)規(guī)則的覆蓋。于是只好每個要應(yīng)用樣式的元素都加上id或者class。關(guān)于css選擇符的優(yōu)先級，網(wǎng)上也有很多文章，我就不贅述了。

所以說，如果感覺離不了class，離不了id，那只能說明兩個問題——xhtml結(jié)構(gòu)不合理或者css掌握得還不夠。

仍然以上面的下拉菜單列表為例。首先使用 ul a 對父級菜單的鏈接應(yīng)用樣式，然后用ul ul a就可以精確定位到次級菜單的鏈接，應(yīng)用新的樣式，對ul a的定義進(jìn)行覆蓋。那么，如果是要精確定位到第二級菜單的第二個元素呢？由于css3的選擇符目前還沒被廣泛支持，而結(jié)構(gòu)又沒有差異，不借助javascript有困難了。但是借助于javascript，非常輕松，比如在jQuery中，我們可以用 $("ul ul:nth(2) li:nth(2)”) 或者 $("ul ul”).eq(1).find(“l(fā)i”).eq(1) 都能得到第二個子菜單的第二個菜單元素。

css和javascript能夠自己精確找到網(wǎng)頁中的任何一個元素，那么網(wǎng)頁自然就不用自己標(biāo)識自己的每個元素。少了這層負(fù)擔(dān)，我們在設(shè)計網(wǎng)頁文檔結(jié)構(gòu)的時候，自然就可以拋棄一切后顧之憂，那么，xhtml中和結(jié)構(gòu)無關(guān)的id和class，還有什么必要存在呢？

去除了不必要的表現(xiàn)元素和屬性（font、center、align、height）之后，又去除了不必要的id、class、onclick、onmouseover之類的樣式和行為屬性，我們的網(wǎng)頁源代碼尺寸越來越小，抓一個頁面下來，少量必要的結(jié)構(gòu)元素之外，剩下的全是鏈接和內(nèi)容，這樣的網(wǎng)站，搜索引擎能不喜歡嗎？

• css