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;
    }
}

这基本上是我的代码的样子。该元素仍然是 float:right 即使在我添加了那行响应性代码之后......我做错了什么？

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

Answer 1

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

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

}

根据 MDN

The "and" keyword is used for combining multiple media features together, as well as combining media features with media types. A basic media query, a single media feature with the implied all media type, could look like this:

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

If, however, you wanted this to apply only if the display is in landscape, you could use an and operator to chain the media features together.

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

Now the above media query will only return true if the viewport is 700px wide or wider and the display is in landscape. If, however, you only wanted this to apply if the display in question was of the media type TV, you could chain these features with a media type using an and operator.

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