Question

我有一个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文件夹（desktop.css和ipad.css）下还有2个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;
}

}

Answer 1

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

@import必须在任何其他样式声明之前出现。

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

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

CSS条件@Import问题

1 个答案: