html选择最后一个元素,css 背景图片属性background｜ 最后一个元素last-child选择器及hover样式...

一 css 背景图片background 属性

华哥虽说css接触得早，而且在dreamweaver里，也曾写过无数的背景属性样式，可是如果要手写css 背景的代码，总是会忘记顺序和一些参数，别说哥很low，毕竟哥不是天天在玩前端啊。

如上图，导航的最后一项，是新增的营销用页面，既然有营销目的，那能否让其更为突出一些，让用户注意到并吸引更多点击呢。比较好的方式是在前面加一个小图标，以突出它的与众不同。

对应的html结构如下：

寒暑假封闭住宿班

可以在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样式，则由于层叠的机制，失效了。

工作记录，以备用。

本文链接：肖运华 » 网站策划设计制作优化 » css 背景图片属性background｜ 最后一个元素last-child选择器及hover样式

转载请注明：http://www.xiaoyunhua.com/2268.html

标签： CSS