当前位置: 代码迷 >> HTML/CSS >> firebug 查看css的有关问题
  详细解决方案

firebug 查看css的有关问题

热度:706   发布时间:2012-07-04 19:33:55.0
firebug 查看css的问题
<a class="li_a ui-link">xxx</a>

a链接有两个样式。ui-link中定义了 padding-left:30px; 
li_a的样式中又定义了 padding-left:0px;

ui-link是jqmobile通过js添加的样式。 两个样式我都写在了同一个css文件里,且li_a的样式代码在后面。
按道理是应该li_a的paddin-left:0px显示的吧。 可为什么firebug里看到, li_a的 padding-left:0px 这个样式被划了一道横线? 横线什么意思? 难道表示被覆盖掉了?那也应该是前面的ui-link的设置被划横线才对吧?

------解决方案--------------------
li_a中定义的padding-left被覆盖了。class属性中设置多个样式时,优先级与顺序是相反的,写在后面的比写在前面的优先级要高。
------解决方案--------------------
楼主 ,看看 js生成的 ui-link 是不是 定义在 li_a 之后了,
或者 ui-link 是不是 有层次关系,这样优先级就比 li_a 高了。

在同级的选择器下(除行内样式),样式是根据在style中定义的顺序来决定的,后来居上。。。

参考下
HTML code

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="gb2312" />
        <title></title>
        <style>
            .red { color:red; }
            .blue { color:blue; }
        </style>
    </head>
    <body>
        <div class="red blue">1111111</div>
        <div class="blue red">1111111</div>
    </body>
</html>

------解决方案--------------------
代码是顺序执行的,后面设置的padding-left 会覆盖到前面设置的值