我有一个包含以下代码的 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;
}
}
最佳答案
就像我在 previous answer 中所说的那样...
@imports have to come before any other style declarations.But in your case, if you import your iPad styles at the beginning they'll probably all get overridden by your desktop styles.
... 因为您的非 iPad 样式适用于所有媒体，包括 iPad 上的 Mobile Safari。由于您的非 iPad 样式出现在您的条件 @import 之后，因此无论它们是否被导入，它们都会覆盖您的样式。这是正常的cascading行为。
关于html - CSS 条件 @Import 问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5755970/