离线下载
获取电子书

稻米鼠 · 更新于 2018-02-24 13:01:00

第二十三章 导航条(八)

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

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

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

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

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

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

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

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

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

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

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

#miao {
    width:120px !imporant;
}

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

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

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

<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">关于</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;
}

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

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

所以我想 CSS 的选择器能不能直接表达最后一项?能,真的能!,来看我的写法(Html 先复原,这次不用动他们):

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

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

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

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

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

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

本章学习卡片:卡片 23

本章代码下载:本章代码


本书是收费的,不过交费凭自觉。价格定义为每人请我喝一杯咖啡(哪种品质的咖啡随意),支付宝账号:

alay9999@163.com (刘源)

为了让大家阅读方便,本书将在如下站点发布,但最终内容以主站为准:

未经本人许可,禁止任何形式转载。相关事宜请联系: dms@zji.me