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

的「和」關鍵字被用於組合多個媒體功能一起，以及媒體功能與媒體類型組合。一個基本的媒體查詢，與隱含的所有媒體類型的單個媒體功能，看起來是這樣的：

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

但是，如果你想這隻有當顯示器處於橫向應用，你可以使用運營商將媒體功能鏈接在一起。

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

現在，如果視口是700像素或更寬，並顯示在景觀上面的媒體查詢纔會返回true。但是，如果您只希望在有問題的顯示器是媒體類型電視時應用此功能，則可以使用運算符將​​這些功能與媒體類型相鏈接。

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