Question

我在头标记中创建了CSS样式，如

<head>
<style type="text/css">
  .... Here
</style>
</head>

从 style.css

移动我的所有CSS代码后

<head>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/mobile.css" />
<link rel="stylesheet" type="text/css" href="css/animations.css" />
</head>

...然后一些CSS代码不起作用。

例如某些@media all and() {....}

我做错了什么？

Answer 1

我必须查看两种状态下的所有规则和样式表（在将它们移动到单独的文件之前和之后）。但CSS规则还取决于它们的外观顺序：现在很可能你的顺序不同。最后的内容将覆盖之前的内容，除非后者不适用，因为它在媒体查询中。但是，如果最初你有这个：

@media screen and (max-width: 768px) {
  .my_div { width: 400px; }
}

以后某个地方

.my_div { width: 750px; }

，然后.my_div的宽度为750px，同样在较小的屏幕上 - 第二条规则适用于所有屏幕尺寸，因此会覆盖第一条规则。

所以如果你有这样的东西并将这两个规则放到不同的外部样式表中，媒体查询在一般规则之后，它们的顺序是不同的，所以现在媒体查询将是有效的因为它不会被同一元素的另一条规则覆盖。

（这是一个非常简单的示例，但对于所有内容的原则都是相同的，例如对于display: block与显示：inline-block对于导航列表中的li项目）

移动到style.css后，CSS代码无法正常工作

1 个答案: