Html 为什么我的iPad媒体查询与我的桌面媒体查询冲突？

我就是这样编写我的桌面CSS的

@media (max-width: 1367px)

这是我的iPad CSS

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) 
and (-webkit-min-device-pixel-ratio: 1) 
and (min-resolution: 132dpi)

---

不幸的是，我用来编写桌面CSS的CSS代码冲突并覆盖了iPad的CSS。为什么会这样？尽管iPad的媒体查询更为具体，但每种媒体都针对不同的设备，但为什么它们会相互冲突。

这两种媒体查询并不是相互排斥的，因此，当两种应用媒体查询都没有特殊性，只是适用性时，它们都是按顺序处理的。然后它就变成了CSS级别的特殊性问题：CSS中更具体的规则获得优先权，如果特殊性相同，则使用最后一个定义

例如：

@media (max-width:1300px) {
  p { color:green; }
}
@media (min-width:1000px) {
  p { color:red; }
}

对于1000到1300像素之间的浏览器，这两个规则集都适用，并且由于两个包含的规则都具有相同的特定性，因此后一个“胜利”段落将为红色

关于CSS如何级联的更多信息，特别是第6.4.3节是每个Web开发人员必须阅读的内容