たとえば、タグ P には、埋め込みスタイル シートと外部スタイル シートで複数回設定された関連する属性値 (color: red;/color: blue など) が含まれる場合があります。では、ブラウザはどの値を使用するのでしょうか。 Pのスタイルを表示しますか？ ? ?これが CSS の仕組みです。 (中でも、特異性がより重要です)
CSS には 3 つの動作メカニズムがあります: 1. 継承 2. カスケード 3. 仕様 (カスケードの原則は継承と特異性に基づいています)
1. 継承: cssの要素は、その子孫に 1 つのこと、つまり CSS プロパティの値を渡します。 body はすべての要素の祖先です。 body{color:red;} を指定すると、ドキュメント内のすべての要素がこのスタイルを継承します。これが、メモ帳プログラムでテキスト行を作成した後、その名前を xxx.html に変更する理由です。各ブラウザには独自の事前定義されたスタイル テーブルがあるため、別のブラウザで開くと異なるフォント効果が表示されます。本文には font 属性が含まれており、ブラウザで HTML を開くと、この属性が継承されます。
もちろん、すべての属性を継承できるわけではありません。継承できる属性のほとんどは、色、フォント、フォント サイズなど、テキストに関連しています。一部の属性は、要素の位置、マージン、パディング、境界線、その他の属性に関係するものなど、継承しても意味がないか、継承するとページのレイアウトに影響します。
2. カスケード: これは CSS の C (カスケード) で、主にスタイルのソースと詳細に従ってカスケードします。
a) スタイル ソース: 以下は、ブラウザが各ソースからスタイルをカスケードする順序です:
は黄色です
如果是这个顺序，style标签在前，link在后
demo.css
div #li1{
color: yellow;}
例子3：选择特指度高的（如按顺序，应该选择link的黄色，但是style中的特指度高 1-0-2 大于 1-0-1，所以选特指度高的红色），后面读取的特指度低的就不会覆盖前面特指度高的。<style> body div #li1{color: red;}</style><link rel="stylesheet" href="demo.css"></head><body> <div id="div1"> <ul class="ul1"> <li id="li1" class="li1">列表项1</li>
为红色
例子4：行内style有最高优先级，前面的代码不变，只在p中加了style blue,列表项立马变成蓝色虽然行内的有最高优先级，但是行内style本身就不常用（不方便移植，增加网页大小）<li id="li1" class="li1" style="color:blue;">列表项1</li>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
