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 */

Answer 2

CSS从上到下进行解析,因此如果两个选择器具有相同的特异性并且匹配相同的元素,则样式表中的后者将获胜.