CSS 条件 @Import 问题答案

【问题标题】：CSS Conditional @Import QuestionCSS 条件 @Import 问题
【发布时间】：2011-08-10 23:44:15
【问题描述】：

我有一个包含以下代码的 HTML 文件；

<html>
 <head>
  <LINK media="all" href="css/desktop.css" type="text/css" rel="stylesheet">
 </head>

 <body>
  <span class="ipad_text">DESKTOP RED;  iPad GREEN</span>
<br />
  <span class="ipad_text2">DESKTOP BLACK;  iPad BLUE</span>
<br />
  <span class="ipad_only">iPad ONLY SHOW</span>
<br />
    <span class="ipad_only2">iPad ONLY 2</span>

 </body>
</html>

css文件夹下还有2个CSS文件（desktop.css和ipad.css）；在 desktop.css 中，我有

@import "ipad.css";

.ipad_text{
    font:42px arial bold;
    color: red;
}


.ipad_text2{
    font:22px verdana bold;
    color: black;
}

.ipad_only{
    display:none;
}

在 ipad.css 中，我有

@media only screen and (device-width:768px)
{
.ipad_text{
    font:32px arial bold;
    color: green;
}

.ipad_text2{
    font:22px verdana bold;
    color: blue;
}

.ipad_only{
    display:block;
}

.ipad_only2{
    color: red;
    font:52px arial bold;
}

}

现在由于某些原因，这不起作用..如果我将 ipad.css 中的代码剪切/粘贴到 desktop.css 文件下，如下所示，该页面在桌面和 iPad 中都正确显示...我在做什么错误的？我希望 2 CSS 驻留在单独的文件中...请帮助我。

以下效果完美

@import "ipad.css";

.ipad_text{
    font:42px arial bold;
    color: red;
}


.ipad_text2{
    font:22px verdana bold;
    color: black;
}

.ipad_only{
    display:none;
}


@media only screen and (device-width:768px)
{
.ipad_text{
    font:32px arial bold;
    color: green;
}

.ipad_text2{
    font:22px verdana bold;
    color: blue;
}

.ipad_only{
    display:block;
}

.ipad_only2{
    color: red;
    font:52px arial bold;
}

}

【问题讨论】：

当你导入一个样式表时，它是@import url("ipad.css");。
请建议我可以采用的替代方法 1) 将不同样式应用于桌面/ipad 和 2) 将它们放在 2 个单独的 CSS 文件中

标签： html css ipad media-queries

【解决方案1】：

就像我在previous answer 中所说的...

@imports 必须在任何其他样式声明之前。

但在您的情况下，如果您在开始时导入 iPad 样式，它们可能都会被您的桌面样式覆盖。

...因为您的非 iPad 样式适用于所有媒体，包括 iPad 上的 Mobile Safari。由于您的非 iPad 样式出现在您的条件 @import 之后，因此无论它们是否被导入，它们都会覆盖您的样式。这是正常的cascading 行为。

【讨论】：

嗯...那么有没有其他方法可以将差异样式应用于桌面/ipad，并将它们物理地放在 2 个单独的文件中？
当我们说“@media not screen and (device-width: 768px)”时，我认为它甚至会排除“not screen”的桌面..bcoz..对吗？
@hmthr：不，它的意思是not (screen and (device-width: 768px))，阅读这里w3.org/TR/css3-mediaqueries
实际上我确实尝试过，但出于某种原因，@media not screen 和 (device-width: 768px) 下的样式未应用于桌面。
@BoltClock：你建议的媒体东西不起作用，现在我看到你已经删除了它..