CSS有条件@导入问题

我有一个HTML文件，它具有以下代码;CSS有条件@导入问题

<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; 
} 

}

现在由于种种原因，这不是working..If我剪切/粘贴的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; 
} 

}

来源

2011-04-22 testndtv

当您导入样式表时，它是'@import url（“ipad.css”）;'。 – BoltClock 2011-04-22 13:56:05

请建议替代方式，我可以有1）差异样式应用于桌面/ iPad和2）让他们在2个单独的CSS文件 – testndtv 2011-04-22 16:43:27

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

@import■找来之前的任何其他样式声明。

但就你而言，如果你在开始时导入iPad样式，它们可能会被你的桌面样式覆盖。

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

来源

2011-04-22 13:39:03 BoltClock

嗯...所以有什么其他方式，我可以使用diff样式应用于桌面/ ipad以及让他们身体在2个独立的文件？ – testndtv 2011-04-22 13:53:13

当我们说“@media不是屏幕和（设备宽度：768px）”时，我认为它甚至会排除“不屏幕”的桌面..bcoz ..对吧？ – testndtv 2011-04-22 14:06:29

@hmthr：不，它的意思是不是（屏幕和（设备宽度：768px））'，请点击这里http://www.w3.org/TR/css3-mediaqueries/ – BoltClock 2011-04-22 14:23:23

CSS有条件@导入问题

回答

相关问题