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

0

いいえ、無効です。通常、@ 規則(で始まる規則@) は、一般的な 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;
}

先頭にすべての @ 規則を置かない場合は、@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 に答える