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

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

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

首先我們知道瀏覽器會給某些元素默認(rèn)的樣式，這個優(yōu)先級最低，因為你做的任何與之沖突的自定義都會將它覆蓋掉。你看前邊我們遇到默認(rèn)樣式的問題就直接再定義一下就好了。

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

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

那么最終 #miao 的寬度是 400px，因為后面的覆蓋前面的。

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

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

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

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

#miao {
    width:120px !imporant;
}

這種寫法可以覆蓋元素的內(nèi)聯(lián)樣式，因為他的優(yōu)先級太高，非十分必要請不要使用！

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

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

<ul id="nav-items">
    <li class="nav-item"><a href="#">首頁</a></li>
    <li class="nav-item"><a href="#download">下載</a></li>
    <li class="nav-item"><a href="#feature">特點</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">注冊</a></li>
</ul>

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

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

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

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

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

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

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

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

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

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

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

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

本章代碼下載：本章代碼

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

alay9999@163.com （劉源）

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

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

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