第二种 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

我想你错过了一个 "and"。

@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) { ...  }

第二种 CSS 风格不超越第一种

Second CSS style not everriding the first

html

css

class

responsiveness