在写一个关于背景图的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. MongoDB配置多个ConfigDB的问题（笔记）

    由于在部署集群之前没有做好的规划,在集群中只有一个configserver和一个mongos.网上都推荐多个configserver,本人在使用的过程中发现在启动mongos进程时,congfigdb ...

  2. 《TCP/IP详解 卷一》读书笔记-----UDP&IP 分片

    1.进程每产生一个UDP数据报就由一个IP数据报进行发送,而在TCP中,一个IP数据报并不与每个TCP报文段一一对应 2.UDP的端口号和TCP的端口号是相互独立的,对那些众所周知的端口号TCP和UD ...

  3. 不会UML的程序员不是好构架师?

    情况描述 我已经工作两年半, 参加过一个网页游戏项目和一个IOS应用项目, 自以为参与度非常高, 也经常涉及到底层引擎和主逻辑业务. 目前想更快的向构架师方向发展. 最近在看\<Learning ...

  4. 实习小记－python 内置函数__eq__函数引发的探索

    乱写__eq__会发生啥?请看代码．． >>> class A: ... def __eq__(self, other): # 不论发生什么,只要有==做比较,就返回True ... ...

  5. 2014 Super Training #4 E Paint the Grid Reloaded --联通块缩点+BFS

    原题: ZOJ 3781 http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=3781 题意: 给一个n*m的X,O构成的格子,对 ...

  6. 服务器操作系统应该选择 Debian/Ubuntu 还是 CentOS？

    来自 http://www.zhihu.com/question/19599986 服务器操作系统应该选择 Debian/Ubuntu 还是 CentOS? 想选择一个 Linux 发行版作为服务器. ...

  7. EasyUI中页面必须刷新才显示tree组件最新数据的BUG解决方案

    在URL地址后面加个时间戳,这样就避免从浏览器缓存里读取数据了 $("#devtree").tree({ url: '/Deviceinfo/ModelsTree.aspx?cmd ...

  8. mysql数据库误删除后的数据恢复操作说明

    在日常运维工作中,对于mysql数据库的备份是至关重要的!数据库对于网站的重要性使得我们对mysql数据的管理不容有失!然后,是人总难免会犯错误,说不定哪天大脑短路了来个误操作把数据库给删除了,怎么办 ...

  9. Mac 使用SSH远程登录

    一.打开ssh Mac Terminal是自带SSH的,可以用whereis来看看: $ whereis ssh 但是在现有进程中找不到ssh对应的进程: $ ps aux | grep ssh ap ...

  10. RAS RC4 AES 加密 MD5

    这两者唯一的相同点是设计者中都包含了MIT的Ron Revist教授.RSA是公钥密码算法,优点:不用事先通过秘密信道传递密钥,可以用于数字签名.缺点:速度慢RC4是序列密码算法,优点:速度快,缺点: ...