スタイルの優先順位:
(インライン スタイル シート [埋め込みスタイル]) > (内部スタイル シート) > (外部スタイル シート)
ハンズオン テストで発見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 (外部スタイル; 埋め込みスタイル) ❤️
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
