5

我很想知道 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 不是一种编程语言。我是 Web 开发的新手，并且正在学习所有这些微小的东西。请帮我。谢谢。

艾萨克

4

3 回答 3

10

后面的语句会覆盖前面的语句，因此您必须从一般到具体。

/* General CSS here */

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

/* CSS for min-width 1024 here, overides both general and 800 */
于 2013-05-14T21:50:59.343 回答
6

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

于 2013-05-14T21:51:10.767 回答
3

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

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

于 2013-05-14T21:50:49.923 回答