Css 无法覆盖WordPress中的h2样式

我在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%;}
}

标题1
标题2
标题3
@媒体屏幕和屏幕（最大宽度：819px）{
h1.block-h1{字体大小：1.2em；线条高度：12px；顶部：10%；}
h2.block-h2{字体大小：1.4em；行高：14px；顶部：50%；}
h3.block-h3{字体大小：1.8em；行高：10px；顶部：70%；}
}

只有和可以重写，但的样式不能重写，保留.post内容h2。样式被添加到页面的页脚

---

使用！强制替代默认样式很重要
示例

h2.block-h2 { font-size:1.4em!important; line-height:14px!important; top: 50%;!important} h2.block-h2{字体大小：1.4em！重要；行高：14px！重要；顶部：50%；！重要}

---

希望这项工作

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

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

---

这是因为您使用的主题正在强制嵌入样式。这可能是因为某个地方有一个主题选项，而开发人员正在使用php将其强制添加到DOM中。嵌入样式替代外部样式，而内联样式反过来替代嵌入样式

你可以从chrome开发工具中看出这一点，因为它的来源是：

？page_id=54行号

---

您可以通过查看主题自定义设置、跟踪开发人员正在推送到页面的代码，或者如用户3313126所说，使用

，来覆盖它们！重要信息

添加！重要信息在css代码之后。

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

免责声明，你应该避免这些；只需更新实际样式表中的代码，或在其中设置条件；但是如果你不能考虑下面的内容，

1。）重写外部

/css.css

样式表。这是最容易覆盖的；您可以在

.html

页面引用中使用样式（您可以将这些样式放在任何位置，它将覆盖），例如

span{color:red；}

2。）如果您需要覆盖类似于上述

中引用的页面样式。您需要声明一个具有最高优先级的内联样式。例如，

yooo

3。）如果您的问题仍然存在。。您的css可以通过JS或jQuery插入，甚至可以通过服务器端插入，包括使其变得有点花哨；大多数情况下，您可以添加一个简单的

！重要信息

到您试图覆盖的位置。例如，

span{颜色：红色！重要；}

4。）如果您仍然有问题；然后这里发生了一些非常奇怪的事情；您应该尝试在其中调试。但是jQuery也可以很好地覆盖大多数场景（尽管您真的不应该对css样式使用如此低级的技术）

但是，您可以简单地执行以下操作：

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

或者。。首先删除以前的样式，然后替换

---

然后用上述任何一种方法添加正确的

你能给我们看更多的代码吗？

h

元素的周围是什么？您认为围绕h元素的代码是什么意思？HTML或CSS代码？是的，我可以使规则更具体，使其工作，只是不知道为什么h1和h2都张贴在同一页上，但有不同的结果。不知道是什么控制代码以及如何进行故障排除。如果您可以编辑您的答案，并解释您显示的代码的功能，以及该代码回答问题的原因/方式，这将使您的答案更有帮助。

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