html - 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 个不受屏幕尺寸限制(即默认)的语句。

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

但我想知道默认设置是否会覆盖屏幕尺寸特定设置，因为我在最后插入了默认设置。我必须把它放在开头吗？你能告诉我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 */