自定义CSS规则在主题中被覆盖

时间:2018-07-03 作者:Ratler

我安装了一个WP主题(Make, 虽然这对问题来说并不重要),我通过主题选项将标题栏文本设置为黑色。我想使标题栏菜单中的一个特定项具有不同的颜色(突出显示),因此我向该菜单项添加了一个名为“appt nav”的css类,以便能够单独操作它。

enter image description here

然后,我通过Dashboard>Appearance>Editor在Theme样式表中添加了一些自定义代码,但它对文本颜色没有影响。如果我尝试为类应用其他样式,它们会起作用,因此我猜字体颜色会被主题中的某些内容覆盖。

例如,如果我使用

.appt-nav {
    color: red;
    text-decoration: line-through;
}
穿过文本的线条确实出现了,它是红色的,但文本本身仍然是黑色的。

enter image description here

我尝试检查生成的HTML,但我不明白为什么会发生这种情况。此外,使用appt-nav a (因为实际文本位于元素中)没有帮助。

我怎样才能知道文本的颜色到底是什么

1 个回复
最合适的回答,由SO网友:Ratler 整理而成

根据@peter hvd的评论,我找到了问题和解决方法。

通过转到DOM和样式检查器中的Computed(计算)选项卡,我扩展了color(颜色)条目,发现优先的是内联规则

.header-bar .menu li a{color:#000000;}

enter image description here

顺便说一句,我不明白为什么网站的每个页面都硬编码有一个内联样式规则;这似乎是糟糕的编码,我认为这是主题的错。但事实就是这样,我不会修正这个主题。

为了使其按预期工作,我将自定义规则更改为

.header-bar .menu li.appt-nav a {
    color: red;
}
添加appt-nav 类使我的规则更加具体,因此使其优先于内联规则。

结束

相关推荐

使用CSS自定义WP网站特定栏目

我想把下面这句话“为更好的生活创造风格”改成另一种字体(Rochester),到目前为止,我已经尝试了几种CSS代码,但迄今为止没有一种对我有效。网站:http://www.tarshim.com请告诉我应该使用什么CSS代码以及在哪里应用它谢谢