html - 影响某些元素而不影响其他元素的媒体查询

Question

我正在使用媒体查询来编辑网站的某些元素以供移动使用。我确定媒体特定样式表有效，但特定元素似乎无法编辑。有谁知道为什么会这样？我粘贴了样式开始标记以及相关元素的两个版本。

<link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="/small-devices.css" type="text/css" />    

#home-content { /* small device stylesheet */
    position:absolute; width:700px;
    bottom:165px; left:0%; padding:35px 45px 35px 45px;
    background:url(/img/content-background.png) repeat;
}

#home-content { /* regular stylesheet */
    position:absolute; width:30%;
    bottom:65px; left:0%; padding:35px 45px 35px 45px;
    background:url(/img/content-background.png) repeat;
}

任何帮助都会很棒!谢谢大家。

Answer 1

这是文档头部样式表的顺序:

<link rel="stylesheet" href="/small-devices.css" media="only screen and (max-device-width: 1000px)" type="text/css" />
<link rel="stylesheet" href="/wp-content/themes/twentythirteen/style.css" type="text/css">
<link rel='stylesheet' id='genericons-css'  href='http://chefpaulcrowe.com/wp-content/themes/twentythirteen/fonts/genericons.css?ver=2.09' type='text/css' media='all' />
<link rel='stylesheet' id='twentythirteen-style-css'  href='http://chefpaulcrowe.com/wp-content/themes/twentythirteen/style.css?ver=2013-07-18' type='text/css' media='all' />

这将导致 small-device.css 被任何具有同等或更高特异性的规则覆盖。您应该移动 small-devices.css 以在标题的下方打印，或增加选择器的特异性。例如:

body #home-content { /*Some CSS*/ }

将覆盖:

#home-content { /*Some CSS*/ }

不考虑顺序。

此外，在您的实际示例中，您没有在#home-content 上设置宽度。

在 small-devices.css ( http://chefpaulcrowe.com/small-devices.css ) 中，您有这段代码。

#home-content {
    position:absolute; max-device-width:700px;
    bottom:165px; left:0%; padding:35px 45px 35px 45px;
    background:red;
}

此属性:

max-device-width:700px;

应该是这样的:

width:700px;