一 css 背景图片background 属性
华哥虽说css接触得早，而且在dreamweaver里，也曾写过无数的背景属性样式，可是如果要手写css 背景的代码，总是会忘记顺序和一些参数，别说哥很low，毕竟哥不是天天在玩前端啊。
如上图，导航的最后一项，是新增的营销用页面，既然有营销目的，那能否让其更为突出一些，让用户注意到并吸引更多点击呢。比较好的方式是在前面加一个小图标，以突出它的与众不同。
对应的html结构如下：
<li><a href="/topic/fbzsb/" class="cur" target="_blank">寒暑假封闭住宿班</a></li>
可以在html里加上图标，但最好的方式还是用css，至少这样不用去后台再把所有的栏目内容生成一遍。
手写了一下background的代码，一些参数忘了，显示成这样。
于是参考：css 背景图片background 属性实例
在一个div元素中设置多个背景图像（并指定他们的位置）：
body
{
background: #00ff00 url('smiley.gif') no-repeat fixed center;
}
于是修改，以下是完整的css代码：
nav .nav_list li:last-child { padding-left: 20px； background: url(/images/tui.png) no-repeat left center;}
ok！
二 最后一个元素last-child 选择器
在上面的示例应用中，要注意的是这个背景图片属性是写在 li:last-child中的。last-child定义和用法是：
:last-child选择器用来匹配父元素中最后一个子元素。也就是说：它表示最后那个的意思。
曾尝试把last-child作用在a标签上，没什么变化，不成。也不去追究什么原因了。此路不通就另找一条。
让last-child作用在父级的li上，就能看到变化。
三 hover样式的变化与独立
最后，希望这个导航中的last元素，在鼠标移上去后有所变化。在没有加入任何css的情况下，最后这个元素也会如同其他导航菜单一样，出现一个橙色的背景，可是由于图片的加入，二者摆在一块，很难看！
那就需要把这最后一个元素的样式给独立出来，有它自己的展现方式，不要像前面的兄弟们长相一样。
那就应该是对li中的最后一个元素里的a标签（见前面的html结构），添加一些样式，发挥作用。
那有可能会出现两个冒号:，不知道这种css的写法能不能生效，以前似乎没有写过。尝试一下吧。代码如下：
nav .nav_list li:last-child a:hover {
color: #fb8023；
background: none;
结果发现，嘿，成了。
以下是浏览器的css工具查看结果，可以看到，最后一个元素里的a标签的hover样式，发挥了作用，而其他兄弟的a里的hover样式，则由于层叠的机制，失效了。
工作记录，以备用。
