比方说,我有:
@media(max-width:800px) {
/* Some Code */
}
@media(max-width:500px) {
/* Some Code */
}
The browser randomly chooses one of those, If I view on 800px, it might choose the 800px css or it might choose the 500px code. If I view on 500px, it might choose the 800px css or it might choose the 500px code. I've noticed, it uses 800px more often, even if my screen size is 500px or less. And sometimes, it combines the 2. Here is a screenshot of code the browser is picking up...
请注意,它是如何同时在两种宽度上拾取的,但是max-width:500px被划掉了?我的屏幕分辨率设置为500px。我会很感激的。谢谢。
The selector with the highest specificity will always apply. Any unexpected behaviour will be due to something affecting specificity.
所以这绝对不是随机的,尽管出于某些原因它可能对您来说是随机的。
对于具有相同优先级的选择器(例如您的示例中的选择器),将应用找到的最后一个选择器。请注意,它如何在所有找到的规则中具有最大的行号。
媒体查询仅会影响何时应用,而不会影响其特异性。
也许CSS的顺序在没有意识到的情况下发生了变化(预处理器的行为可能出乎意料?),或者您在没有意识到影响特异性的情况下自己更改了顺序。