某些 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 中的检查器时，我找不到样式。 就好像它不存在一样，我不知道为什么。

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 缓存后，一切正常。