在写一个关于背景图的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. 【问题&解决】试用版SQL Server 2008 R2 提示评估期已过，数据库不能访问解决办法

    因为以前一直是试用版,重启服务器之后,突然数据库不能访问,提示评估期已过,都快吓死了.还好找到了解决办法特copy解决步骤如下: (笔者用的是企业版: R88PF-GMCFT-KM2KR-4R7GB- ...

  2. 该如何认识ZBrush中的2.5D绘画

    ZBrush不仅对3D行业进行了改革.让艺术家感到无约束自由创作的3D设计,同时它还是一个强大的绘画程序!基于强大的Pixol功能,ZBrush®将数字绘画提升到一个新的层次.如下图所示,插画功能主要 ...

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

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

  4. ifrog-1028 Bob and Alice are playing numbers(trie树)

    题目链接: Bob and Alice are playing numbers DESCRIPTION Bob and his girl friend are playing game togethe ...

  5. 移动开发js库Zepto.js应用详解

    从哪里下载 Zepto 地址:http://zeptojs.com/ 中文版地址:http://www.css88.com/doc/zeptojs_api/ 这个问题看起来很蠢,从官网下载不就行了嘛! ...

  6. 配置 AEM CQ6 (author + publish + apache dispatcher + ubuntu )

      AEM CQ系列是Adobe下的企业内容管理系统,现在已知的一些企业比如 Deloitte,Ford Racing,这里就不多做基本的介绍了,明白的看! 今天在Docker配置一下author i ...

  7. Linux 删除文件中某一行的方法

    如果有一个abc.txt文件,内容是: aaa bbb ccc ddd eee fff 如果要删除aaa,那么脚本可以这样写: sed -i '/aaa/d' abc.txt 如果删除的是一个变量的值 ...

  8. 使用JspStudy集成环境快速部署jsp项目

    1. 安装jdk 本人网盘资源:https://yunpan.cn/ckZLNbqxkDYYe (提取码:b5e8) 去jdk官网下载最新的jdk: http://www.oracle.com/tec ...

  9. cotangent Laplacian

    几何网格处理经常用到 cotangent laplacian矩阵.前几天把这个功能整合到我的Maya 转 Matlab插件了. 这里发一个利用cotangent laplacian计算特征向量并显示的 ...

  10. 头像上传功能实现，PC端的需要做兼容

    暂时实现的效果: http://sandbox.runjs.cn/show/v2vkds3j <form action=""> <img id="vie ...