更新時(shí)間：2015-08-19
如果你在看過(guò)我們之前關(guān)于HTML、JS以及CSS的文章之后開(kāi)始對(duì)它們有所了解，那么你就應(yīng)該開(kāi)始花心思在如何使得相應(yīng)的代碼寫(xiě)得更為簡(jiǎn)潔高效上，今天我們就來(lái)探討一下，同樣的一個(gè)元素，是否可以通過(guò)CSS選擇器的使用技巧從而達(dá)到最快速也最高效的選擇。
采用ID選擇元素
ID是很多新手特別喜歡用的元素屬性，因?yàn)樗?jiǎn)單方便快捷，想要取哪個(gè)元素，只要加上ID就行了。
但是這樣真的更加高效合理嗎？從某種意義上來(lái)說(shuō)，ID的選擇確實(shí)是最為方便快捷的，但是如果一個(gè)HTML文檔結(jié)構(gòu)中充斥了過(guò)多ID元素，就失去了原本ID存在的意義。
只有當(dāng)該元素在文檔結(jié)構(gòu)中充當(dāng)搭建布局的作用，并且是唯一的一個(gè)元素的時(shí)候，你才能使用ID來(lái)標(biāo)識(shí)它。
最簡(jiǎn)單的例子，比如一個(gè)網(wǎng)站的頭部、主體、以及尾部，它們作為整個(gè)網(wǎng)站的結(jié)構(gòu)而存在，而在一個(gè)頁(yè)面文檔結(jié)構(gòu)中，它們又是唯一存在的，所以這時(shí)候，我們需要用ID來(lái)區(qū)分它們。比如header、main、以及footer。你可以通過(guò)網(wǎng)站基礎(chǔ)結(jié)構(gòu)這篇文章來(lái)了解更多。
采用CSS選擇器來(lái)指定這些元素的方式非常簡(jiǎn)單，只需要#id即可，如果你是想要在jQuery中選擇它們，也只需要$(“#id”)即可。
采用Class選擇元素
Class，顧名思義就是樣式，在整個(gè)網(wǎng)站中都是可以重復(fù)使用的，那么它的意義跟ID就有本質(zhì)上的區(qū)別。
Class主要用于同種樣式的元素（顏色、大小、間距等等），通過(guò)樣式的控制，能夠非常方便迅速地修改整站元素樣式。
例如一個(gè)網(wǎng)站的按鈕樣式非常多，如果你定義了不同樣式，btn-red、btn-blue、btn-green，你就可以非常迅速地在對(duì)應(yīng)元素中引入。
CSS選擇器選擇樣式的方法也很簡(jiǎn)單，.btn-red即可（點(diǎn)+樣式名稱），而對(duì)應(yīng)的jQuery就是$(“.btn-red”)。
采用屬性選擇元素
自從HTML5規(guī)范流行以來(lái)，越來(lái)越多的人開(kāi)始懂得在HTML元素中嵌入數(shù)據(jù)來(lái)更加靈活地與JS進(jìn)行數(shù)據(jù)互動(dòng)，例如data-xxx屬性，就能通過(guò)屬性選擇器獲取。
屬性選擇器的使用環(huán)境應(yīng)該是怎樣的呢？
例如一個(gè)你想要對(duì)登錄框進(jìn)行不同的操作，那么你完全可以把操作方式放入button當(dāng)中的data-action屬性中，那么整站其他有多方式操作的表單按鈕就可以統(tǒng)一通過(guò)一個(gè)選擇器選中，然后采用JS進(jìn)行處理。
CSS選擇器根據(jù)屬性選擇元素的書(shū)寫(xiě)方式，可以采用類似 button[data-action*=“action”] 來(lái)選中，同樣jQuery中也只需要通過(guò)$(“”)包含起來(lái)即可。
采用nth-child選擇元素
如果你想要在一些有序的元素中（例如ul、ol等）實(shí)現(xiàn)錯(cuò)落有致的樣式，那么就可以通過(guò)nth-child來(lái)迅速實(shí)現(xiàn)。
最簡(jiǎn)單的nth-child寫(xiě)法比如li:nth-child(n)，就是選擇了第n個(gè)li元素。
同樣你也可以通過(guò)nth-child(odd)或者nth-child(even)從而對(duì)排序中的奇數(shù)或者偶數(shù)進(jìn)行選擇。
