我的目标是在 iphone 或类似移动设备中加载页面时，将类 notice-bar 的 div 背景设置为红色。
这是我的 less 文件:
@mandy: #ff0000;
// extra small
@screen-xs: 480px;
@screen-xs-min: @screen-xs;
// Small screen / tablet
// Note: Deprecated @screen-sm and @screen-tablet as of v3.0.1
@screen-sm: 768px;
@screen-sm-min: @screen-sm;
// So media queries don't overlap when required, provide a maximum
@screen-xs-max: (@screen-sm-min - 1);
.hidden {
display: none;
}
// This does not work too
// .active .content .notice-bar {
// background: @mandy;
// }
.active .content {
@media (max-width: @screen-xs-max) {
background: @mandy;
.header {
display: none;
}
.notice-bar {
display: block;
}
.view-switcher a {
color: white;
}
}
}
这是我的html文件
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="test.css">
</head>
<body>
<div class="content active">
<div class="header notice-bar">
Expect to be red background
</div>
<div class="header header-text">
Expect to be hidden
</div>
<div class="hidden">
Hidden
</div>
</div>
</body>
</html>
我希望类 header notice-bar 的 div 在 iPhone 或其他类似智能手机中查看时具有红色背景色，但事实并非如此。实际上，即使我明确设置它，它也不起作用。
.active .content .notice-bar {
background: @mandy;
}
我错过了什么？
编辑
我听从了@Vucko 的建议，我可以在 chrome 中看到红色背景。但是我仍然无法在移动 safari 中看到相同的效果。这是新的 less 代码
.active.content {
@media (max-width: @screen-xs-max) {
这是截图
我的首要任务是让 less 代码可以 media 规范工作。
最佳答案
您的 LESS/CSS 可以工作，只是您的选择器有误。
.active .content .notice-bar{}
表示您的目标是 .content那是 .active 的 child .
目标<div class="content active"> ，你必须加入这两个类(class)，比如
.active.content{} /* notice there is no space bewteen active and content*/
.content .active .notice-bar{
background: red;
}
.content.active .notice-bar{
background: blue;
}<div class="content">
<div class="active">
<div class="notice-bar">
.active is the child of .content
</div>
</div>
</div>
<div class="content active">
<div class="notice-bar">
parent has two classes
</div>
</div>此外，要使其在移动设备上运行，您必须添加 meta 移动视口(viewport)的标记。
<meta name="viewport" content="width=device-width, initial-scale=1">
有关更多信息，请参阅 HTML5 boilerplate documentation .
关于html - 为什么这个 less 规范无法将背景应用到 div？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27703965/