在写一个关于背景图的CSS时候发现一个奇怪的现象，

原图：

如下代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn">

<head>

    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

    <title>首页 | shopping</title>

    <style type="text/css">

    *{margin: 0;padding: 0;}

    li{list-style-type: none;}

        /*皮肤设置*/

        #skin{width: 115px;height: 15px;margin-top: 12px;float: left;margin-left: 10px;overflow: hidden;text-indent: -999px}

        #skin li{width: 15px;height: 15px;background: url(https://images0.cnblogs.com/blog/607355/201408/011822379465492.gif);float: left;cursor:pointer; margin-right:5px;}

        #skin_0{background-position: 0px 0px;}

        #skin_1{background-position: 15px 0px;}

        #skin_2{background-position: 35px 0px;}

        #skin_3{background-position: 55px 0px;}

        #skin_4{background-position: 75px 0px;}

        #skin_5{background-position: 95px 0px;}

    </style>

</head>

<body>

    <ul id="skin">

        <li id="skin_0" class="skin_selected">蓝</li>

        <li id="skin_1">绿</li>

        <li id="skin_2">橙</li>

        <li id="skin_3">湛蓝</li>

        <li id="skin_4">红</li>

        <li id="skin_5">紫</li>

    </ul>

</body>

</html>

理论上效果应该是这样的：

但是，若其中的 #skin li中背景属性写为 background:   ，则不能实现，结果是这样的

也就是说，#skin_0、#skin_1、#skin_2、#skin_3、#skin_4、#skin_5这几个id所定义的样式没起作用，还是上面的“#skin li”所定义的 background: url(http://9.liulong.sinaapp.com/theme.gif); 在起作用。

在firebug中也可以看出：

经过我的测试，解决这个问题有两种方式：

第一种是，改为：background-image: url(http://9.liulong.sinaapp.com/theme.gif);则可以实现。

第二种是，把#skin_0，改为#skin li#skin_0 ,其他的依次类推，例如我们更改为：

        #skin li#skin_0{background-position: 0px 0px;}

        #skin li#skin_1{background-position: 15px 0px;}

        #skin li#skin_2{background-position: 35px 0px;}

        #skin_3{background-position: 55px 0px;}

        #skin_4{background-position: 75px 0px;}

        #skin_5{background-position: 95px 0px;}

效果：

可以看出来，前三个id发生了作用。

综上，我认为使用background和background-image会对CSS优先级造成影响。那么，其他类似的属性应该也是如此，例如使用background和background-color等等这类属性。此处暂时不做验证。

在书写的时候应该注意。CSS选择器写的更细致，要么单使用一个属性定义。

使用background和background-image对CSS优先级造成影响的更多相关文章

  1. css选择器及css优先级

    三个css选择器:id选择器#test1{ }.class选择器.test2{ }.标签选择器div{ }对三个div:<div>我是普通div</div>.<div i ...

  2. css优先级汇总

    原文:css优先级汇总 我所理解的css优先级:当两个或者多个样式作用于同一个元素时,就会出现css优先级的问题. 多重样式优先级:当内联样式.内部样式和外部样式作用于同一个元素时,属于多重样式的范畴 ...

  3. CSS优先级和定位

    overflow属性 hidden scroll auto hidden 超出隐藏 scroll 滚动条 Auto 自动 display属性 block inline inline-block non ...

  4. 关于css优先级

    css的优先级从低到高依次是:内部样式表的优先级为(1,0,0,0),id选择器优先级为(0,1,0,0),class选择器为(0.0,1,0),tag标签为(0.0,0,1).除此之外,!impor ...

  5. CSS优先级问题以及jQuery中的.eq()遍历方法和:eq()选择器的差别

    在写一个TAB选项卡的时候遇到几个有意思的问题,记录下来 先把代码贴出来 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transition ...

  6. CSS优先级的详细解说

    一.什么是CSS优先级? 所谓CSS优先级,即是指CSS样式在浏览器中被解析的先后顺序. 二.CSS优先级规则 既然样式有优先级,那么就会有一个规则来约定这个优先级,而这个“规则”就是本次所需要讲的重 ...

  7. 关于CSS的优先级,CSS优先级计算

    原则一: 继承不如指定原则二: #id > .class > 标签选择符原则三:越具体越强大原则四:标签#id >#id ; 标签.class > .class CSS优先级权 ...

  8. css 优先级 机制

    多重样式(Multiple Styles):如果外部样式.内部样式和内联样式同时应用于同一个元素,就是使多重样式的情况. 一般情况下,优先级如下: (外部样式)External style sheet ...

  9. z-index、display、selector选择器优先级css优先级面试用到

    z-index:控制元素叠放顺序,哪个z-index数值越大,那个优先被叠放在上面. relative.absolute.fixed这三种情况可以使用z-index. static不可以使用. dis ...

随机推荐

  1. linux下批量替换文件内容

    1.网络上现成的资料 格式: sed -i "s/查找字段/替换字段/g" `grep 查找字段 -rl 路径` linux sed 批量替换多个文件中的字符串: (此命令很强大) ...

  2. SVN代码的回滚二

    SVN代码的回滚: 不丢失新建的文件,获得最新的SVN版本控制.TortoiseSVN-ShowLog-选中你要回滚的版本-右键-Export,之后将修改的文件覆盖到你的最新版本,commit即可. ...

  3. java 8-5 抽象

    1. 抽象类的概述: 动物不应该定义为具体的东西,而且动物中的吃,睡等也不应该是具体的. 我们把一个不是具体的功能称为抽象的功能,而一个类中如果有抽象的功能,该类必须是抽象类. 抽象类的特点: A:抽 ...

  4. 使用clone( )和Cloneable接口

    由Object类定义的绝大部分方法在本书其他部分讨论.而一个特别值得关注的方法是clone( ).clone( )方法创建调用它的对象的一个复制副本.只有那些实现Cloneable接口的类能被复制. ...

  5. http协议详解<一>

    原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.http://7826443.blog.51cto.com/7816443/1729227 写在 ...

  6. 单机最大tcp连接数

    from:http://www.cnblogs.com/mydomain/archive/2013/05/27/3100835.html 单机最大tcp连接数 网络编程 在tcp应用中,server事 ...

  7. Java中是否可以继承String类，为什么

    Java中,是否可以继承String类?为什么? 答案: 不可以,因为String类有final修饰符,而final修饰的类是不能被继承的,实现细节不允许改变. public final class ...

  8. discourse 基于ember.js+rails项目的安装部署

    最近公司在讨论做一个ERP运维问答的论坛系统,看了很多开源系统,觉得discourse功能比较完善,灵活.可配置性非常好,部署方便,瀑布流的主题布局模式也很符合未来论坛的趋势,于是在 ucloud 上 ...

  9. 爱奇艺招聘uwp开发

    招聘链接:https://job.cnblogs.com/offer/53380/ 工作地点:北京-海淀 工作年限:1年 学历要求:本科 招聘分类:移动开发工程师 工资范围:面议 职位要求 1.扎实的 ...

  10. 思科产品选型pdf

    以前做工程时候想起了设备选型时候用过的一份文档. 有个小伙伴今天问起思科设备选型,恰好google到了这份文档 https://www.cisco.com/web/CN/products/pdf/04 ...