在樣式塊中放置一個規則是否合法？

以下是有效的CSS：在樣式塊中放置一個規則是否合法？

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

在我已經放在h1風格的塊內的@media聲明如下。它有效的CSS？谷歌搜索，我只發現@media陳述的例子被放置在另一個。我對CSS的術語缺乏足夠的熟悉以進一步完善我的搜索條件，希望能夠回答這個問題。

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

來源

2013-10-07 Hammerite

不，它是無效的。通常，at-rules（以@開頭的規則）只能在CSS樣式表的開始處允許使用。但是，@media和@page規則也可以在其他地方使用，但規則之間只有，不在規則內。 A 規則是由選擇器列表和一系列括號之間的聲明組成的結構，例如， 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; }

如果你不把所有的規則在開始時，你可以使@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-07 05:58:04

這條規則也有例外 - 「@ media」規則可以放置在樣式表中的任何位置，並且級聯將相應生效。但是，它們必須放置在樣式規則之外。在這種情況下，使用@ @ print print {h1 {font-weight：normal; }}'在通用'h1'規則的下面，而不必使用特異性hack或'！important'。 – BoltClock

對，忘記了。編輯答案。 –

不會。這會使您的代碼無效，請在w3驗證器上嘗試一下以檢查您自己。 http://jigsaw.w3.org/css-validator/#validate_by_input

來源

2013-10-07 02:48:01

出題目：我LOLed當我讀到OP ...讓我想起了4chan的和Reddit的。 +1的答案和笑聲：D –

好吧：「OP」是指原創海報，所以它不完全是唯一的4chan或reddit。儘管答案中幾乎沒有必要對提問者進行說明 - 你自然會回答提問者的問題，所以你會寫信給他們。 – BoltClock

對不起BoltClock，英語是我的第二語言，我正在努力改進它，當我寫下這個問題的海報時，並不意味着不尊重的標誌。 – 2013-10-07 11:25:43

在樣式塊中放置一個規則是否合法？

回答

相關問題