CSS - 规则适用于@media(最大宽度 : 550px) but not @media (max-width: 750px)

Question

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

如果它被放置在@media max-width:550px 而不是@media max-width:750px，则此规则有效(div 将停止 float 并变为 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 在屏幕达到最大宽度 750px 时停止 float 。 Div .float-left-diva 有一些文本，而 .float-left-divb 有一个电子邮件表单。我也不相信这是浏览器缓存。如果我将它改回 @550，它会再次工作。

Answer 1

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

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

或者添加一个最小宽度以防止大于 550 的宽度覆盖内容。