Css 如果多个@media查询与当前设备相关，浏览器如何确定应用哪个@media查询的优先级？

我有一个网站，需要调整的某些决议的基础上元素定位

例如，我有一个媒体查询：

@所有媒体和（最大宽度：385px）

而这个媒体查询:

@所有媒体和（最大宽度：500px）

正在讨论的设备低于385px宽。。。但它优先考虑500px的媒体查询（我为android设备提供了500px的媒体查询，这些设备介于标准iPhone纵向宽度和特定的androids纵向宽度之间）

请参见我的chrome开发工具的屏幕截图：

它试图应用这两个CSS集，因为它满足每个CSS集的标准，但当我需要优先考虑较低的CSS集时，它会优先考虑较高的CSS集。

所有CSS集

CSS定义了特殊性规则，以确定如果多个选择器匹配同一元素时该怎么办。
（具体而言，最具体、最底层的属性获胜）

---

无论选择器是全局的、在同一媒体查询中还是在不同的媒体查询中，这些规则都适用。

级联顺序很重要。当应用各种@media查询块以获得最大宽度时，从最宽开始，然后逐步向下。文件中后面的规则将覆盖前面的规则，因此在本例中，由于两者都适用，因此需要正确设置顺序，以便规则正确级联。类似地，如果检查

minwidth

，您将从最小尺寸开始，并添加规则以随着尺寸的增加修改样式。基本上，一个块的规则适用于两个块，但第二个块（与更具体的场景匹配）将覆盖第一个块

如果需要样式完全相互排斥，则需要为每个@media查询块设置

min width

和

max width