代码教程——第二十三章 导航条（八）

我们来做一些简单的美化工作，本着过犹不及的原则（其实是我懒），我们就做点很简单的东西啊，比如：你看两个导航项之间的分隔不明确是吧，我们来加个分割线啊，挺简单的事，给 #nav .nav-item 选择器下加上 border-right:1px solid #DDD; 就可以了，就是每个导航项的右侧边框是一像素粗细，实线（solid），颜色是 #DDD。看到啦，边框就这么设置，简单吧～

然后为什么只设置右边的？大家想想就明白啦，每个导航项的左边都和另一个导航项共用一条线啊，这个可以理解吧。但是这里还是多了一个小麻烦哦，就是每组导航项的最后一个，他右侧的边框没人来共用，孤零零，显得好多余啊～

所以加分割不难，而去掉多余的分隔却有点麻烦。这里有两种方法可以去掉分隔，但是在这之前我想我要先说一下 CSS 的优先顺序。

首先我们知道浏览器会给某些元素默认的样式，这个优先级最低，因为你做的任何与之冲突的自定义都会将它覆盖掉。你看前边我们遇到默认样式的问题就直接再定义一下就好了。

如果在 CSS 里遇到定义重复、冲突的情况，则后面的定义覆盖前面的定义。比如：

那么最终 #miao 的宽度是 400px，因为后面的覆盖前面的。

在 Html 文件里，link 一个 CSS 文件也就相当于把这个 CSS 文件的内容完全插入在那个位置，然后依旧是后面的定义覆盖前面的。这也就不难理解如果我们同时引入两个 CSS 文件，那么后面的文件优先级要比前面的文件高。

进而的，如果我把 style 标签写在页尾（其实这个标签不止可以出现在页头，它可以出现在几乎任何位置，只是不推荐罢了），那么他的优先级肯定是蛮高的，因为它在所有 CSS 定义的最后了。

但这还不算什么，元素的内联样式（就是直接写在元素标签里的样式）的优先级高于前边所有。

哇，好高哦！但是还可以更高一些，CSS 属性值末尾加上 !important 的优先级高于上面所有，比如：

这种写法可以覆盖元素的内联样式，因为他的优先级太高，非十分必要请不要使用！

但是还有木有优先级更高的？有！就是浏览器的扩展，他们的优先级高也只是基于上面的理论，将 CSS 写到页尾或者写成内联等，但是更可怕的是他们权限也是很高的，高到可以直接修改页面元素，所以我们测试页面的时候要禁用所有扩展，以避免不必要的干扰。

我忽然说这个你应该已经猜到了结局：我们只要把最后一个 li 元素的样式覆盖一下就好。没问题，这个有两种方式，一个是给最后的 li 都加上一个相同的 class，然后定义一下这个 class，演示如下（我只写关键部分的代码）：

注意一下：class="nav-item last-item" 的写法，空格分隔两个 class，也就是这个元素同时具有两个 class ，同时享受他俩的定义，还真是幸福呢～

这个做法很容易理解，当然了，要注意新加的这部分 CSS 的位置哦，想想应该谁覆盖谁？

但是我很懒，懒得没边，再去加一个 class 倒是不是大事，但是我以后追加导航项是不是还要做修改，特别注意把 last-item 这个 class 加给最后一个导航项才对？你说这是多麻烦啊～

所以我想 CSS 的选择器能不能直接表达最后一项？能，真的能！，来看我的写法（Html 先复原，这次不用动他们）：

用冒号连接的叫做伪类，就是本来没有这个类，但是我们利用一定的规则去选择这个元素。现在很明白了，最后一个不加边框啊，于是我们的效果达到了。

但是你没有疑问么？我们的选择器好像是说的 #nav 里面的 最后一个 .nav-item 啊，怎么有两个 li 都没有边框了？不应该只是最后一个“注册”自己没有边框吗？

:last-child 这个伪类的意思是“属于其父元素的最后一个子元素”，很拗口是吧，打个比方你就懂了：俄罗斯小学开家长会（中国不行，都是独生子女，俄罗斯兄弟姐妹多一点），一个家长带着他家几个孩子，如此这般的家庭站满了操场。校长在上面说一至三年级的学生（这个相当于选择器）每家里那个最小的（:last-child 是每家最小的那个），上台来。这时候就要符合上面两个条件了，首先要是一到三年级的学生，然后如果一家有五个符合这一条件，那就只让最小的那个上去。能理解吧，你说我爸爸他们哥仨，我们兄弟姐妹一十八个是一个爷爷的，我们十八个人是不是只出最小的那个？这跟爷爷没关系，只看父母（父辈元素），父母相同的孩子里出最小的一个。

所以 li（.nav-item）的父元素是 ul，ul 他们家里中的最后一个，那么现在两个 ul ，当然也就出来两个最后一个。

大家好好看看上面的比喻，搞清楚 :last-child 哦，下一节我们学习新的伪类～

本章代码