CSS的执行顺序

Question

我很想知道CSS文件中语句的执行顺序。我在CSS文件中有以下CSS：

/* screen width larger than 800px */
@media screen (min-width: 800px) {
     .indexphototd {
            width:200px !important;
        }
     .indexphoto {
         width:200px !important;
      }
}

/* screen width larger than 1200px */
@media screen (min-width: 1200px) {
     .indexphototd { 
            width:300px !important;
        }
     .indexphoto {
         width:300px !important;
      }
}


/* default setting */
.indexphototd { 
    width:500px !important;
   }
.indexphoto {
    width:500px !important;
   }

在上面的代码中，我已经在2种不同的屏幕尺寸中声明了2种类型的2种类型的设置，之后我提到了2种语句而没有屏幕尺寸的限制（即默认）。

我的目标是，屏幕尺寸不属于上述2组，必须采用下面第3组中设置的默认值。

但是我想知道默认设置是否会覆盖屏幕大小特定设置，因为我已经在最后插入了默认设置。我必须把它放在一开始吗？能告诉我CSS中的执行顺序吗？我知道CSS不是一种编程语言。我是网络开发和学习所有这些小东西的新手。请帮我。感谢。

艾萨克

Answer 1

后面的语句覆盖了之前的语句，所以你必须具体到具体的。

/* General CSS here */

/* CSS for min-width 800 here, overides general */

/* CSS for min-width 1024 here, overides both general and 800 */

Answer 2

CSS从上到下进行解析，因此如果两个选择器相等specificity并匹配相同的元素，则样式表中的后者将获胜。

Answer 3

必须在媒体查询之前声明您的默认值。

CSS按顺序“执行”。您希望媒体查询覆盖特定实例中的默认值，因此您必须在之后声明它们。