在写一个关于背景图的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. ETL from hadoop to vertica

    根据项目需要,我做了一个POC(proof of concept),XML TXT的数据从HADOOP 引入到VERTICA. 我采用的方案是pig,具体信息可以参加vertica官方的文档. Acc ...

  2. Ubuntu 12.04 DNS服务器的配置方法

    Bind是一款开放源码的DNS服务器软件,由美国加州大学Berkeley分校开发和维护的,全名为Berkeley Internet Name Domain它是目前世界上使用最为广泛的DNS服务器软件, ...

  3. Oracle 分组聚合二种写法，listagg和wmsys.wm_concat

    with temp as( select 'China' nation ,'Guangzhou' city from dual union all select 'China' nation ,'Sh ...

  4. hadoop中NameNode、DataNode和Client三者之间协作关系及通信方式介绍

    <ignore_js_op> 1)NameNode.DataNode和Client         NameNode可以看作是分布式文件系统中的管理者,主要负责管理文件系统的命名空间.集群 ...

  5. uva 10129 play on words——yhx

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAABNUAAANeCAYAAAA1BjiHAAAgAElEQVR4nOydabWsuhaFywIasIAHJK

  6. Stanford机器学习笔记-1.线性回归

    Content: 1. Linear Regression 1.1 Linear Regression with one variable 1.1.1 Gradient descent algorit ...

  7. Linux搭建python环境中cx_Oracle模块安装遇到的问题与解决方法

    安装或使用cx_Oracle时,需要用到Oracel的链接库,如libclntsh.so.11.1,否则会有各种各样的错误信息. 安装Oracle Instant Client就可得到这个链接库,避免 ...

  8. Android Handler处理机制 ( 二 ) ——Handler,Message,Looper,MessageQueue

    Android是消息驱动的,实现消息驱动有几个要素: 消息的表示:Message 消息队列:MessageQueue 消息循环,用于循环取出消息进行处理:Looper 消息处理,消息循环从消息队列中取 ...

  9. javascript使用栈结构将中缀表达式转换为后缀表达式并计算值

    1.概念 你可能听说过表达式,a+b,a+b*c这些,但是前缀表达式,前缀记法,中缀表达式,波兰式,后缀表达式,后缀记法,逆波兰式这些都是也是表达式. a+b,a+b*c这些看上去比较正常的是中缀表达 ...

  10. RDLC系列之四 常见错误

    解决 RDLC 报表自动分页表头显示问题 原文:http://www.th7.cn/Program/net/201207/85445.shtml RDLC是用XML来描述一个报表相关的一切,只需要在& ...