某些CSS样式未应用于Firefox，Safari或Chrome

Question

我有一个WordPress网站，由于某种原因，我的一些CSS样式没有应用于任何浏览器。

/* This rule is rendered in the browser */
.post-date,
.author {
font-weight: bold;
}
/* This two rules doesn't render in the browser */
figure.alignright,
figure.aligncenter {
text-align: center;
}
@media screen and (min-width: 500px) {
figure.alignright {
float: right;
margin-left: 20px;
}
}

<p class="post-date">Some published date</p>
<p class="author">Author</p>
<div class="wp-block-image">
<figure class="alignright is-resized">
<img src="someImgageURL" width="100" height="100">
</figure>
<div>

例如，我有未应用的figure样式。
当我在Firefox中的样式编辑器或Chrome中的Inspector中查找时，我找不到样式。就像它不存在一样，我不知道为什么。

Answer 1

你正在使用这个：

@media screen and (min-width: 500px) {
figure.alignright {
float: right;
margin-left: 20px;
}
}

这意味着浏览器的最小宽度为 500px 将运行此 css，因此此 css 覆盖了上面的代码。

你应该使用

@media only screen and (max-width: 500px) {
figure.alignright {
float: right;
margin-left: 20px;
}
}

Answer 2

大多数浏览器将网站及其样式表、图像等缓存到安全带宽。
这意味着您将不得不强制浏览器更新 css 文件，您可以通过手动删除缓存或完全禁用缓存来完成！

Answer 3

也许您在该行之前有一些 CSS 语法错误。(也许打开了额外的支架或其他东西( 我阅读了您写的所有评论并得出了这个结论。 您可以使用以下方法对其进行测试。 请删除CSS文件中的所有CSS代码，只留下要测试的CSS部分。 如果它有效，请查看您刚刚删除的 CSS 代码并检查拼写错误。 希望这对你有帮助。 谢谢

Answer 4

我终于发现了问题所在。是Wordpress自己对样式表的缓存导致了问题。清除WordPress缓存后，一切都按预期工作。