在样式块中定位at-rule是否合法？

Question

以下是有效的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;
    }
}

Answer 1

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

Answer 2

不，它无效。通常，at-rules（以@开头的规则）仅允许在样式表的开头，通用CSS原则。但是，其他地方也允许@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-rules，则可以使@media规则更简单：

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