ホームページ > 記事 > ウェブフロントエンド > CSS_html/css_WEB-ITnose の優先度
CSS_html/css_WEB-ITnose の優先度
- WBOYオリジナル
- 2016-06-24 11:31:501160ブラウズ
スタイルの優先順位:
(インライン スタイル シート [埋め込みスタイル]) > (内部スタイル シート) > (外部スタイル シート)
ハンズオン テストで発見1 つだけ例外があります。外部スタイルが内部スタイル シート (非埋め込みスタイル) の背後で参照されている場合、外部スタイルは内部スタイルをオーバーライドします。
テスト 1 (挿入順序: 内部スタイル; 外部スタイル)
rree
テスト 2 (挿入順序: 埋め込みスタイル; 外部スタイル)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html lang="en"><head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>case</title> <style type="text/css"> *{ margin: 0px; padding: 0px; } #container{ width: 500px; height: 500px; background-color: black;/*黑色*/ } </style> <link rel="stylesheet" type="text/css" href="CaseTest1.css"><!-- 蓝色 --></head><body> <div id="container"></div><!-- 结果：蓝色，覆盖--></body></html> テスト 3 (外部スタイル; 外部スタイル)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html lang="en"><head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>case</title> <style type="text/css"> *{ margin: 0px; padding: 0px; } #container{ width: 500px; height: 500px; } </style> </head><body> <div id="container" style="background-color: red"</div><!-- 结果：红色，没有覆盖--></body><link rel="stylesheet" type="text/css" href="CaseTest1.css"><!-- 蓝色 --></html>
テスト 4 (外部スタイル; 埋め込みスタイル) ❤️
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。