html - 第二个 CSS 样式不会超越第一个

Question

.review-stars .nt-testimonials footer {
    margin-top: 0px;
    float: right;
}

@media only screen (max-width:40em){
    .review-stars .nt-testimonials footer {
        float: none!important;
    }
}

这基本上是我的代码的样子。该元素仍然是浮动的：即使在我添加了那行代码以进行响应之后……我做错了什么？

我添加到@media 部分的其他类都可以正常工作

Answer 1

我想你错过了一个“和”。

@media only screen and (max-width:40em) {

}

每个MDN

“and”关键字用于将多个媒体特征组合在一起，以及将媒体特征与媒体类型组合在一起。一个基本的媒体查询，一个隐含所有媒体类型的单一媒体功能，可能如下所示：

@media (min-width: 700px) { ... }

但是，如果您希望仅在横向显示时应用此功能，则可以使用 and 运算符将媒体功能链接在一起。

@media (min-width: 700px) and (orientation: landscape) { ... }

现在，只有当视口为 700 像素或更宽且显示为横向时，上述媒体查询才会返回 true。但是，如果您只希望在所讨论的显示器是媒体类型 TV 时应用此功能，则可以使用 and 运算符将这些功能与媒体类型链接起来。

@media tv and (min-width: 700px) and (orientation: landscape) { ...  }