firebug 查看css的有关问题

2012-07-04

firebug 查看css的问题a classli_aui-linkxxx/aa链接有两个样式。ui-link中定义了 padding-left:30p

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

热点排行

CSS

firebug 查看css的有关问题