Question

我在WordPress页面中制作三个标题文本，如果屏幕宽度小于820px，则重写CSS。以下是我的代码。

<h1 class="block-h1">Heading 1</h1>
<h2 class="block-h2">Heading 2</h2>
<h3 class="block-h3">Heading 3</h3>

@media screen and (max-width: 819px) {
    h1.block-h1 { font-size:1.2em; line-height:12px; top:10%;}
    h2.block-h2 { font-size:1.4em; line-height:14px; top: 50%;}
    h3.block-h3 { font-size:1.8em; line-height:10px; top: 70%;}
}

只有＆lt; h1＆gt;和＆lt; h3＆gt;可以重写，但＆lt; h2＆gt;的风格无法覆盖，保留.post-content h2。添加样式添加页面的页脚。

http://screencloud.net/v/tlTe enter image description here

Answer 1

使用！important强制覆盖默认样式
实施例

 h2.block-h2 { font-size:1.4em!important; line-height:14px!important; top: 50%;!important}

希望这项工作

Answer 2

您是否尝试过让您的h2规则更具体？

#wrapper .post-content h2.block-h2 {}

Answer 3

之所以这样，是因为您使用的主题是强制嵌入式样式。这可能是因为某处有一个主题选项，开发人员正在使用php强制它到DOM。嵌入式样式会覆盖外部样式，反过来，内联样式会覆盖嵌入式。

您可以从chrome dev工具中了解到这种情况，因为它说来源是：?page_id=54 LINE NUMBER

您可以通过查看主题自定义设置，跟踪开发人员推送到页面的代码来覆盖它们，或者如用户3313126所说，使用!important。

Answer 4

在css代码后添加！important 。

Answer 5

了解优先读取 CSS 的层次结构可以帮助您解决此问题。

免责声明，你应该避免这些;并只更新实际样式表中的代码，或在其中进行条件化;但如果你不能考虑以下内容。

1。）覆盖外部/css.css样式表。这是最容易覆盖的;你可以在.html页面中引用样式（你可以将它们放在任何地方，它会覆盖）例如。在<head><style>span { color: red; }</style></head>

内

2。）如果您需要覆盖类似于上面</head>中所引用的页面样式。您需要声明一个具有最终优先权的内联样式。例如。 <span class="purple" style="color:red;">yooo</span>

3。）如果你的问题仍然存在..你的css可以通过JS或jQuery或甚至服务器端插入包括使它有点琐事;大多数情况下，您可以在尝试覆盖的位置添加简单的!important。例如。 <head><style>span { color: red !important; }</style></head>

4。）如果您还有问题;那么这里有一些奇怪的事情;你应该尝试调试。但jQuery可以覆盖大多数场景也很好（尽管你真的不应该使用这种低级技术来实现css样式）

但是你可以这样做：

$("span").css("color","red");

或..首先删除以前的样式 - 然后替换。

$("span").removeAttr('style').css("color","purple");

然后使用上述任何方法添加正确的方法！

无法覆盖WordPress中的h2样式

5 个答案: