我們來(lái)做一些簡(jiǎn)單的美化工作，本著過猶不及的原則（其實(shí)是我懶），我們就做點(diǎn)很簡(jiǎn)單的東西啊，比如：你看兩個(gè)導(dǎo)航項(xiàng)之間的分隔不明確是吧，我們來(lái)加個(gè)分割線啊，挺簡(jiǎn)單的事，給 #nav .nav-item 選擇器下加上 border-right:1px solid #DDD; 就可以了，就是每個(gè)導(dǎo)航項(xiàng)的右側(cè)邊框是一像素粗細(xì)，實(shí)線（solid），顏色是 #DDD?？吹嚼?，邊框就這么設(shè)置，簡(jiǎn)單吧～

然后為什么只設(shè)置右邊的？大家想想就明白啦，每個(gè)導(dǎo)航項(xiàng)的左邊都和另一個(gè)導(dǎo)航項(xiàng)共用一條線啊，這個(gè)可以理解吧。但是這里還是多了一個(gè)小麻煩哦，就是每組導(dǎo)航項(xiàng)的最后一個(gè)，他右側(cè)的邊框沒人來(lái)共用，孤零零，顯得好多余啊～

所以加分割不難，而去掉多余的分隔卻有點(diǎn)麻煩。這里有兩種方法可以去掉分隔，但是在這之前我想我要先說一下 CSS 的優(yōu)先順序。

首先我們知道瀏覽器會(huì)給某些元素默認(rèn)的樣式，這個(gè)優(yōu)先級(jí)最低，因?yàn)槟阕龅娜魏闻c之沖突的自定義都會(huì)將它覆蓋掉。你看前邊我們遇到默認(rèn)樣式的問題就直接再定義一下就好了。

如果在 CSS 里遇到定義重復(fù)、沖突的情況，則后面的定義覆蓋前面的定義。比如：

#miao {
    width:300px;
}
#miao {
    width:400px;
}

那么最終 #miao 的寬度是 400px，因?yàn)楹竺娴母采w前面的。

在 Html 文件里，link 一個(gè) CSS 文件也就相當(dāng)于把這個(gè) CSS 文件的內(nèi)容完全插入在那個(gè)位置，然后依舊是后面的定義覆蓋前面的。這也就不難理解如果我們同時(shí)引入兩個(gè) CSS 文件，那么后面的文件優(yōu)先級(jí)要比前面的文件高。

進(jìn)而的，如果我把 style 標(biāo)簽寫在頁(yè)尾（其實(shí)這個(gè)標(biāo)簽不止可以出現(xiàn)在頁(yè)頭，它可以出現(xiàn)在幾乎任何位置，只是不推薦罷了），那么他的優(yōu)先級(jí)肯定是蠻高的，因?yàn)樗谒?CSS 定義的最后了。

但這還不算什么，元素的內(nèi)聯(lián)樣式（就是直接寫在元素標(biāo)簽里的樣式）的優(yōu)先級(jí)高于前邊所有。

哇，好高哦！但是還可以更高一些，CSS 屬性值末尾加上 !important 的優(yōu)先級(jí)高于上面所有，比如：

#miao {
    width:120px !imporant;
}

這種寫法可以覆蓋元素的內(nèi)聯(lián)樣式，因?yàn)樗膬?yōu)先級(jí)太高，非十分必要請(qǐng)不要使用！

但是還有木有優(yōu)先級(jí)更高的？有！就是瀏覽器的擴(kuò)展，他們的優(yōu)先級(jí)高也只是基于上面的理論，將 CSS 寫到頁(yè)尾或者寫成內(nèi)聯(lián)等，但是更可怕的是他們權(quán)限也是很高的，高到可以直接修改頁(yè)面元素，所以我們測(cè)試頁(yè)面的時(shí)候要禁用所有擴(kuò)展，以避免不必要的干擾。

我忽然說這個(gè)你應(yīng)該已經(jīng)猜到了結(jié)局：我們只要把最后一個(gè) li 元素的樣式覆蓋一下就好。沒問題，這個(gè)有兩種方式，一個(gè)是給最后的 li 都加上一個(gè)相同的 class，然后定義一下這個(gè) class，演示如下（我只寫關(guān)鍵部分的代碼）：

<ul id="nav-items">
    <li class="nav-item"><a href="#">首頁(yè)</a></li>
    <li class="nav-item"><a href="#download">下載</a></li>
    <li class="nav-item"><a href="#feature">特點(diǎn)</a></li>
    <li class="nav-item last-item"><a href="#about">關(guān)于</a></li>
</ul>
<ul id="nav-items-r">
    <li class="nav-item"><a href="#signin">登錄</a></li>
    <li class="nav-item last-item"><a href="#signup">注冊(cè)</a></li>
</ul>

注意一下：class="nav-item last-item" 的寫法，空格分隔兩個(gè) class，也就是這個(gè)元素同時(shí)具有兩個(gè) class ，同時(shí)享受他倆的定義，還真是幸福呢～

#nav .last-item {
    border:none;
}

這個(gè)做法很容易理解，當(dāng)然了，要注意新加的這部分 CSS 的位置哦，想想應(yīng)該誰(shuí)覆蓋誰(shuí)？

但是我很懶，懶得沒邊，再去加一個(gè) class 倒是不是大事，但是我以后追加導(dǎo)航項(xiàng)是不是還要做修改，特別注意把 last-item 這個(gè) class 加給最后一個(gè)導(dǎo)航項(xiàng)才對(duì)？你說這是多麻煩啊～

所以我想 CSS 的選擇器能不能直接表達(dá)最后一項(xiàng)？能，真的能！，來(lái)看我的寫法（Html 先復(fù)原，這次不用動(dòng)他們）：

#nav .nav-item:last-child {
    border:none;
}

用冒號(hào)連接的叫做偽類，就是本來(lái)沒有這個(gè)類，但是我們利用一定的規(guī)則去選擇這個(gè)元素?，F(xiàn)在很明白了，最后一個(gè)不加邊框啊，于是我們的效果達(dá)到了。

但是你沒有疑問么？我們的選擇器好像是說的 #nav 里面的 最后一個(gè) .nav-item 啊，怎么有兩個(gè) li 都沒有邊框了？不應(yīng)該只是最后一個(gè)“注冊(cè)”自己沒有邊框嗎？

:last-child 這個(gè)偽類的意思是“屬于其父元素的最后一個(gè)子元素”，很拗口是吧，打個(gè)比方你就懂了：俄羅斯小學(xué)開家長(zhǎng)會(huì)（中國(guó)不行，都是獨(dú)生子女，俄羅斯兄弟姐妹多一點(diǎn)），一個(gè)家長(zhǎng)帶著他家?guī)讉€(gè)孩子，如此這般的家庭站滿了操場(chǎng)。校長(zhǎng)在上面說一至三年級(jí)的學(xué)生（這個(gè)相當(dāng)于選擇器）每家里那個(gè)最小的（:last-child 是每家最小的那個(gè)），上臺(tái)來(lái)。這時(shí)候就要符合上面兩個(gè)條件了，首先要是一到三年級(jí)的學(xué)生，然后如果一家有五個(gè)符合這一條件，那就只讓最小的那個(gè)上去。能理解吧，你說我爸爸他們哥仨，我們兄弟姐妹一十八個(gè)是一個(gè)爺爺?shù)?，我們十八個(gè)人是不是只出最小的那個(gè)？這跟爺爺沒關(guān)系，只看父母（父輩元素），父母相同的孩子里出最小的一個(gè)。

所以 li（.nav-item）的父元素是 ul，ul 他們家里中的最后一個(gè)，那么現(xiàn)在兩個(gè) ul ，當(dāng)然也就出來(lái)兩個(gè)最后一個(gè)。

大家好好看看上面的比喻，搞清楚 :last-child 哦，下一節(jié)我們學(xué)習(xí)新的偽類～

本章學(xué)習(xí)卡片：卡片 23

本章代碼下載：本章代碼

本書是收費(fèi)的，不過交費(fèi)憑自覺。價(jià)格定義為每人請(qǐng)我喝一杯咖啡（哪種品質(zhì)的咖啡隨意），支付寶賬號(hào)：

alay9999@163.com （劉源）

為了讓大家閱讀方便，本書將在如下站點(diǎn)發(fā)布，但最終內(nèi)容以主站為準(zhǔn)：

• 主站首發(fā)： http://coffee.zji.me/
• Gitbook: http://codeme.gitbooks.io/easy-web-code-book/
• 簡(jiǎn)書： http://www.jianshu.com/users/d37eaf3de0ff
• 站酷： http://www.zcool.com.cn/u/12927742

未經(jīng)本人許可，禁止任何形式轉(zhuǎn)載。相關(guān)事宜請(qǐng)聯(lián)系： dms@zji.me