使用媒体查询更改 wordpress 他们的 CSS答案

【问题标题】：Changing wordpress thems's CSS with media queries使用媒体查询更改 wordpress 他们的 CSS
【发布时间】：2021-04-01 07:27:38
【问题描述】：

我希望改进 Wordpress 网站的风格。我有一个具有这种样式的 group-input 类的 div：

.group-input {
  display: inline-block;
  margin-bottom: 0px;
  float: right;
  padding-left: 10px;
  text-align: right;
 }

我希望屏幕低于 572 像素我们切换到浮动：左所以我在前面的代码下方写了这个，在我的主题的 CSS 文件中，如下所示：

 .group-input {
  display: inline-block;
  margin-bottom: 0px;
  float: right;
  padding-left: 10px;
  text-align: right;
 }

@media (max-width: 572px) {
    .group-input {
        float: left !important;
    }
}

另一方面，它不起作用，新样式不适用于我的 div。突然不知道该怎么办了。你有什么想法，一个领导给我建议吗？我想要一些解释，对你来说简单的东西对我来说不一定很明显，突然我需要理解。感谢您的时间和帮助。

【问题讨论】：

这可能不是问题，但如果你真的需要 !important（你可能不需要）它应该放在分号之前。如果这不能解决问题，请告诉我们您将此 css 添加到哪个文件，它是子主题吗？
我添加了 !important 作为测试以“查看”是否有效......但它没有！谢谢你回答我。我将 css 添加到 style.css 文件中。我认为这是最好的地方......在控制台（F12）中，当我将浮动从右向左更改时，我正在寻找的效果很好......这就是为什么我想在 style.css

标签： css wordpress styles media-queries

【解决方案1】：

一般来说，这应该覆盖您尝试执行的 css 规则，但它可能是另一个更具体针对该元素的 css 规则。它可能不会被覆盖的几个原因是：

另一个 CSS 规则比你的更具体
它位于比您的更具体的断点中
它使用 !important

所有这些的组合将要求您在定位元素时更加具体。

如果您发现您无法覆盖规则，请尝试通过定位它的祖父母/父母并向下处理 html 树来更具体地定位元素。如果您发现这也不起作用，请尝试使用 !important。

检查它周围的 html 结构试试。有时甚至body .group-input 可能已经足够具体了，但是您指定的元素越接近，您的情况就会越好。

【讨论】：

感谢您的帮助，我正在寻找，感谢您的明确解释并花时间帮助我。 :)
没问题！祝你好运。