同じ要素に同時に CSS スタイルを設定するために 3 つの方法を使用するという状況がある場合、どの方法が本当に効果的でしょうか?これは右側のエディターで起こったことです
1. inline
CSS を使用して、「Super Cool Internet」のテキストを pink
に設定します。 内联式
CSS设置“超酷的互联网”文字为粉色
。
2、然后使用嵌入式
CSS来设置文字为红色
。
3、最后又使用外部式
设置文字为蓝色
(style.css文件中设置)。
但最终你可以观察到“超酷的互联网”这个短词的文本被设置为了粉色
。因为这三种样式是有优先级的,记住他们的优先级:内联式 > 嵌入式 > 外部式
但是嵌入式>外部式有一个前提:嵌入式css样式的位置一定在外部式的后面。如右代码编辑器就是这样,<link href="style.css" ...>代码在<style type="text/css">...</style>代码的前面(实际开发中也是这么写的)。感兴趣的小伙伴可以试一下,把它们调换顺序,再看他们的优先级是否变化。
其实总结来说,就是--就近原则(离被设置元素越近优先级别越高)
embedded
CSS を使用してテキストを red
に設定します。 external style
を使用してテキストを blue
に設定します (style.css ファイルで設定)。 🎜🎜しかし、最終的には、「Super Cool Internet」という短い単語のテキストが ピンク
に設定されていることがわかります。これら 3 つのスタイルには優先順位があるので、次の優先順位を覚えておいてください。埋め込み> 外部
🎜🎜埋め込み> ;外部スタイルには、埋め込み CSS スタイルの位置が外部スタイルの後ろになければならないという前提があります。たとえば、右側のコード エディタでは、<link href="style.css" ...> コードは <style type="text/css">...</style> の前にあります。 ; コード(実際にはこれも開発中に書かれています)。興味のある友達は試してみて、順序を逆にして、優先順位が変わるかどうかを確認してください。 🎜🎜実際、要約すると、--近接原理 (設定されている要素に近いほど優先度が高くなります)
です。 🎜🎜次のセクション