1. スタイルの優先順位
インライン スタイル > 内部スタイル > 外部スタイル
次の特殊なケース: 外部スタイルは内部スタイルをオーバーライドします (インライン スタイルは推奨されません)
2. セレクターの優先度
インラインスタイル (1000) > id (100) > クラス (10) > タグ (10)以下の例の div で表示される背景色は黒です。
<html><head> <style type="text/css"> div { background:red; } </style> <link rel="stylesheet" type="text/css" href="style.css" /></head><body> <div>Hello World!</div></body></html>
<html><head> <style type="text/css"> #divId { height:100px; background:black; } .divClass { height:100px; background:green; } </style></head><body> <div id="divId" class="divClass">Hello World!</div></body></html>現時点では、js コードが機能していないことがわかります。その理由はわかっているはずです。
解決策はたくさんありますが、ここでは 2 つ紹介します:
(1) 変更する必要がある属性が少ない場合は、js を直接使用して属性を変更できます
<html><head> <style type="text/css"> #divId { height:100px; background:black; } .divClass { height:100px; background:red; } </style></head><body> <div id="divId"></div></body><script type="text/javascript"> window.onload = function() { var divId = document.getElementById("divId"); divId.className = "divClass"; };</script></html>
(2) 属性が多数ある場合変更する必要がある属性は、クラスの優先順位が現在のディビジョンのIDよりも高いように、外部にIDを含むもう1つのタグを追加できます。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
