3つの方法の優(yōu)先順位
同じ要素に同時に CSS スタイルを設定するために 3 つの方法を使用するという狀況がある場合、どの方法が本當に効果的でしょうか?これは右側のエディターで起こったことです
1. inline
CSS を使用して、「Super Cool Internet」のテキストを pink
に設定します。 內聯式
CSS設置“超酷的互聯網”文字為粉色
。
2、然后使用嵌入式
CSS來設置文字為紅色
。
3、最后又使用外部式
設置文字為藍色
(style.css文件中設置)。
但最終你可以觀察到“超酷的互聯網”這個短詞的文本被設置為了粉色
。因為這三種樣式是有優(yōu)先級的,記住他們的優(yōu)先級:內聯式 > 嵌入式 > 外部式
但是嵌入式>外部式有一個前提:嵌入式css樣式的位置一定在外部式的后面。如右代碼編輯器就是這樣,<link href="style.css" ...>代碼在<style type="text/css">...</style>代碼的前面(實際開發(fā)中也是這么寫的)。感興趣的小伙伴可以試一下,把它們調換順序,再看他們的優(yōu)先級是否變化。
其實總結來說,就是--就近原則(離被設置元素越近優(yōu)先級別越高)
embedded
CSS を使用してテキストを red
に設定します。 external style
を使用してテキストを blue
に設定します (style.css ファイルで設定)。 ????しかし、最終的には、「Super Cool Internet」という短い単語のテキストが ピンク
に設定されていることがわかります。これら 3 つのスタイルには優(yōu)先順位があるので、次の優(yōu)先順位を覚えておいてください。埋め込み> 外部
????埋め込み> ;外部スタイルには、埋め込み CSS スタイルの位置が外部スタイルの後ろになければならないという前提があります。たとえば、右側のコード エディタでは、<link href="style.css" ...> コードは <style type="text/css">...</style> の前にあります。 ; コード(実際にはこれも開発中に書かれています)。興味のある友達は試してみて、順序を逆にして、優(yōu)先順位が変わるかどうかを確認してください。 ????実際、要約すると、--近接原理 (設定されている要素に近いほど優(yōu)先度が高くなります)
です。 ????