3つの方法の優先順位

同じ要素に同時に CSS スタイルを設定するために 3 つの方法を使用するという状況がある場合、どの方法が本当に効果的でしょうか?これは右側のエディターで起こったことです

1. inlineCSS を使用して、「Super Cool Internet」のテキストを pink に設定します。 内联式CSS设置“超酷的互联网”文字为粉色。

2、然后使用嵌入式CSS来设置文字为红色。

3、最后又使用外部式设置文字为蓝色（style.css文件中设置）。

但最终你可以观察到“超酷的互联网”这个短词的文本被设置为了粉色。因为这三种样式是有优先级的，记住他们的优先级：内联式 > 嵌入式 > 外部式

但是嵌入式>外部式有一个前提：嵌入式css样式的位置一定在外部式的后面。如右代码编辑器就是这样，<link href="style.css" ...>代码在<style type="text/css">...</style>代码的前面（实际开发中也是这么写的）。感兴趣的小伙伴可以试一下，把它们调换顺序，再看他们的优先级是否变化。

其实总结来说，就是--就近原则（离被设置元素越近优先级别越高）

2. 次に、embeddedCSS を使用してテキストを red に設定します。

🎜3. 最後に、external style を使用してテキストを blue に設定します (style.css ファイルで設定)。 🎜🎜しかし、最終的には、「Super Cool Internet」という短い単語のテキストが ピンク に設定されていることがわかります。これら 3 つのスタイルには優先順位があるので、次の優先順位を覚えておいてください。埋め込み> 外部🎜🎜埋め込み> ;外部スタイルには、埋め込み CSS スタイルの位置が外部スタイルの後ろになければならないという前提があります。たとえば、右側のコードエディタでは、<link href="style.css" ...> コードは <style type="text/css">...</style> の前にあります。 ; コード（実際にはこれも開発中に書かれています）。興味のある友達は試してみて、順序を逆にして、優先順位が変わるかどうかを確認してください。 🎜🎜実際、要約すると、--近接原理 (設定されている要素に近いほど優先度が高くなります) です。 🎜🎜

学び続ける

新しいファイル

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>样式网页</title> <link href="style.css" rel="stylesheet" type="text/css"> <style type="text/css"> span{ color:red; } </style> </head> <body> <p>PHP中文网，<span style="color:pink">超酷的互联网</span>、IT技术免费学习平台，创新的网络一站式学习、实践体验；服务及时贴心，内容专业、有趣易学。专注服务互联网工程师快速成为技术高手！</p> </body> </html>

提出するリセットコード

自動運転