CSS - 规则有效@media（最大宽度：550px）但不适用于@media（最大宽度：750px）

Question

.float-left-diva, .float-left-divb

如果放置在@media max-width:550px 但不在@media max-width:750px，则此规则有效（div 将停止浮动并变为 100% 宽度）。

我不知道为什么。我只是复制/粘贴或突出显示并拖动它来移动它，并确保我没有省略 .或任何结局。我试过把它放在 .gallery 类的上面和下面。这正是在我的 style.css 中输入的方式。

@media (max-width: 750px) {

.float-left-diva, .float-left-divb {
width:100%;
float:none;
margin:10px auto;
border:none;
}
.gallery {
width:48%;
margin:20px 1%;
float:left;
text-align:center;
}
}


@media (max-width: 550px) {

img.floatleft {
float:none; 
margin:10px auto
}
.homeboxes {
width:90%;
margin:20px 1%;
float: none;
text-align:center;
border:1px solid #A48A73;
}
#headerblock {
width:100%;
margin:0 auto;
}
.float-left-div, .float-left-div1, .float-left-div2 {
width:100%;
float:none;
margin:10px auto;
border:none;
}
}

由于它确实有效@550px，我知道与 css 相比，我的 html 中没有类型 O。而且我知道必须正确输入其他所有内容，因为它可以完成@550px 的预期操作。我只想让 div 在屏幕达到最大宽度 750 像素时停止浮动。 Div .float-left-diva 有一点文本，而 .float-left-divb 有一个电子邮件表单。我也不相信它是浏览器缓存。如果我将它改回@550，它会再次起作用。

Answer 1

这可能是因为样式表级联。

尝试脚本底部的最高像素值。

或者添加一个最小宽度来防止大于 550 的东西覆盖。