0

我有一个包含以下代码的 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;
}

}

现在由于某些原因，这不起作用..如果我在 desktop.css 文件下剪切/粘贴 ipad.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;
}

}
4

1 回答 1

1

就像我在之前的回答中所说的那样......

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

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

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

于 2011-04-22T13:39:03.053 回答