firebug 查看css的有关问题-HTML教程-爱易网页

firebug 查看css的有关问题

日期：2014-05-17　浏览次数：20607 次

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 会覆盖到前面设置的值

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

firebug 查看css的有关问题

相关资料更多>

推荐阅读更多>