Sifr3 - 是否可以使用父选择器覆盖CSS样式?

时间:2009-08-23 21:37:26

标签: css sifr

我想覆盖已经通过选择定义的设置 父选择器,但我不知道如何。 比如,网站上有2个页面,如下所示...

- 首页 -
<body><h1 class="sifr">Home</h1></body>

- 关于页面 -
<body class="about"><h1 class="sifr">About</h1></body>

然后,我在sirf-config.js中有这些......

sIFR.replace(fontname,{  选择器:'h1.sifr',  css:'。ifIFR-root {color:#666666;字体大小:29px; }” });

sIFR.replace(fontname,{  选择器:'body.about h1.sifr',  css:'。ifIFR-root {color:#FFFFFF;字体大小:29px; }” });

但它不起作用......

如果有人帮助我,我将不胜感激。

3 个答案:

答案 0 :(得分:0)

检查加载CSS与发出替换命令的顺序......

答案 1 :(得分:0)

我不使用Sifr,所以我不确切知道它是如何工作的。我假设代码创建了这样的CSS代码:

h1.sifr { color: #666666; font-size: 29px; }
body.about h1.sifr { color: #FFFFFF; font-size: 29px; }

如果是,则会覆盖about页面中标题的颜色样式,因为第二行的选择器比第一行中的选择器更具体。

您可以阅读有关特异性here的更多信息。

如果它不起作用,那是因为你的代码中有些东西看起来不像你认为的那样,而且你的代码的某些其他部分很可能是你没有在这里显示的东西导致问题的原因。

您可以使用Firefox中的Firebug插件检查页面中的元素,以确切了解哪个css影响每个元素。

答案 2 :(得分:0)

body.about h1.sifr之前运行h1.sifr 的替换。 sIFR不计算特异性,但按顺序执行替换。替换h1.sifr会替换所有这些元素,因此body.about h1.sifr只能找到已被替换的元素。