1

以下是有效的 CSS：

@media print {
    .no_print {
        display: none;
    }
}
h1 {
    font-family: Verdana, Arial, sans-serif;
    font-size: 13px;
    font-weight: bold;
    margin-bottom: 12px;
}

在下文中，我在样式块中放置了一个@media语句。h1它是有效的 CSS 吗？@media谷歌搜索，我只找到将语句放在另一个中的示例。我对 CSS 的术语不够熟悉，无法进一步完善我的搜索词，以期回答这个问题。

h1 {
    font-family: Verdana, Arial, sans-serif;
    font-size: 13px;
    font-weight: bold;
    margin-bottom: 12px;
    @media print {
        font-weight: normal;
    }
}
4

2 回答 2

2

不会。这将使您的代码无效，请在 w3 验证器上尝试以自行检查。http://jigsaw.w3.org/css-validator/#validate_by_input

于 2013-10-07T02:48:01.410 回答
0

不，它无效。通常，根据一般 CSS 原则，at-rules（以 开头的规则@）仅允许在样式表的开头。但是，@media其他@page地方也允许使用规则，但只能在规则之间，而不是在规则内部。规则是一种结构，由选择器列表和大括号之间的一组声明组成，例如h1 { color: blue; line-height: 1 }. 浏览器需要忽略一个放错位置的规则（他们确实这样做了）。

您可以将@media规则放在开头，但要将效果限制在h1元素中，您需要在选择器中指定它。由于 CSS 级联规则（在计算特异性时忽略了媒体限制），您需要使选择器比单纯的选择器更具体h1（否则后一个声明获胜）；一个简单的方法是使用上下文选择器body h1，它不限制选择器的含义，只是赋予它更高的特异性：

@media print {
    body h1 {
        font-weight: normal;
    }
}
h1 {
    font-family: Verdana, Arial, sans-serif;
    font-size: 13px;
    font-weight: bold;
    margin-bottom: 12px;
}

如果您不将所有 at 规则放在开头，则可以使@media规则更简单：

h1 {
    font-family: Verdana, Arial, sans-serif;
    font-size: 13px;
    font-weight: bold;
    margin-bottom: 12px;
}
@media print {
    h1 {
        font-weight: normal;
    }
}
于 2013-10-07T05:58:04.810 回答