在写一个关于背景图的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. Hadoop with tool interface

    Often Hadoop jobsare executed through a command line. Therefore, each Hadoop job has to support read ...

  2. 随机序列生成算法---生成前N个整数的一组随机序列

    问题描述: 给定输入N,生成从1开始的:1,2,3,4,......N 一组随机序列,序列中的数不能重复出现. 比如:N=5,合法的随机序列为{4,3,1,5,2} .{3,1,4,2,5}……非法的 ...

  3. 权限框架 - shiro 授权demo

    之前说了权限认证,其实也就是登录验证身份 这次来说说shiro的授权 shiro可以针对角色授权,或者访问资源授权 两者都行,但是在如今的复杂系统中,当然使用后者,如果你是小系统或者私活的话,前者即可 ...

  4. Android系列之Fragment（二）----Fragment的生命周期和返回栈

    ​[声明] 欢迎转载,但请保留文章原始出处→_→ 生命壹号:http://www.cnblogs.com/smyhvae/ 文章来源:http://www.cnblogs.com/smyhvae/p/ ...

  5. Python创建Cocos2d-x 2.2方法

    把创建项目做成一个批处理,当创建项目时可以省时省力很多. 操作步骤 1.在 E:\cocos2d-x-2.2.1\tools\project-creator 目录下创建 create_project. ...

  6. Go cron定时任务的用法

    cron是什么 cron的意思就是:计划任务,说白了就是定时任务.我和系统约个时间,你在几点几分几秒或者每隔几分钟跑一个任务(job),就那么简单. cron表达式 cron表达式是一个好东西,这个东 ...

  7. 如何设置word里的代码格式,使之有底纹的效果

    1.测试平台:word2013 2.步骤:设计->底纹->填充->应用于->确定 3.效果:

  8. 史上最全Html与CSS布局技巧

    单列布局水平居中水平居中的页面布局中最为常见的一种布局形式,多出现于标题,以及内容区域的组织形式,下面介绍四种实现水平居中的方法(注:下面各个实例中实现的是child元素的对齐操作,child元素的父 ...

  9. Android 动画之AlphaAnimation应用详解

    窗口的动画效果,淡入淡出什么的,有些游戏的欢迎动画,logo的淡入淡出效果就使用AlphaAnimation.AlphaAnimation(0.01f, 1.0f); 从0.01f到1.0f渐变.学过 ...

  10. iOS 定位精度

    时间 2015-03-19 18:30:59  图灵社区  由于iOS不能直接控制到GPS,一般来说我们都会使用CLLocationManager来获取地理位置信息,我们会使用 manager.des ...