如何在 1 个 div 类中应用 2 个 CSS 样式？答案

【问题标题】：how to apply 2 css styles in 1 div class?如何在 1 个 div 类中应用 2 个 CSS 样式？
【发布时间】：2020-11-03 11:02:22
【问题描述】：

我正在尝试移动放在 Wordpress 标题中的简码。问题是，从下面的 2 个 css 规则中，只有第一个有效。如果我更改顺序，那么再次只有第一个有效。

@media only screen and (max-width: 1024px) {
    .right-header-wrap-flags {
        position: absolute;
        top: 25px;
        left: 22px;
        }

.navigation-wrap{ 
padding-top: 60px;

} @media only screen and (min-width: 1025px) {
.right-header-wrap-flags {
position: relative;
left: 600px; 
top: 50px;
}

【问题讨论】：

你在末尾少了一个括号
这是一个有点笼统的问题......首先你错过了一个右括号。
顶部的媒体屏幕有效，第二个无效。如果更改顺序只有顶部媒体屏幕有效，则相同
如果您的页面是 900 像素的示例，它适用于第一个条件...我认为您必须了解有关媒体查询的更多信息
我知道，但问题是即使我再次切换顺序，也只有第一个媒体规则适用，顶部的媒体规则仅适用

标签： css wordpress media-queries wordpress-shortcode

【解决方案1】：

如果您希望“Navigation-wrap”类成为第一个媒体查询的一部分：

    @media only screen and (max-width: 1024px) {
        .right-header-wrap-flags {
            position: absolute;
            top: 25px;
            left: 22px;
            }
    
      .navigation-wrap{ 
      padding-top: 60px;
    
     }
    } <-- this was missing!
    
    @media only screen and (min-width: 1025px) {
    .right-header-wrap-flags {
    position: relative;
    left: 600px; 
    top: 50px;
    }
}

如果“navigation-wrap”应该独立于您的媒体查询：

    @media only screen and (max-width: 1024px) {
        .right-header-wrap-flags {
            position: absolute;
            top: 25px;
            left: 22px;
            }
    } <-- this was missing!
      .navigation-wrap{ 
      padding-top: 60px;
    
     }
    
    
    @media only screen and (min-width: 1025px) {
    .right-header-wrap-flags {
    position: relative;
    left: 600px; 
    top: 50px;
    }
  }

原因：您忘记了括号，这基本上意味着第二个媒体查询是您的第一个，所以它永远不会发生！当您的屏幕尺寸达到 1025 像素时，第一个媒体查询不再处于活动状态，而第二个媒体查询在第一个媒体查询内，因此它也不会再发生了。那应该可以解决它

【讨论】：

感谢您的回复。改了还是一样
检查浏览器检查器使用了什么媒体查询
所以如果你把屏幕尺寸改成超过 1025 像素，第一条规则仍然适用吗？
最后还缺少一个括号。仔细检查。
@Pantelis Sarras 你如何改变屏幕尺寸来检查你的代码？我在一个示例中进行了尝试，它对我来说效果很好

【解决方案2】：

是的，只有第一个 CSS 代码有效，您应该使用 javascript，根据您指定的条件更改样式。

【讨论】：