關(guān)于@import和link引入樣式的區(qū)別網(wǎng)上有很多種說(shuō)法。大致有如下幾種，不過這其中會(huì)有我存疑的地方，我們可以一起來(lái)探討一下。

“專業(yè)、務(wù)實(shí)、高效、創(chuàng)新、把客戶的事當(dāng)成自己的事”是我們每一個(gè)人一直以來(lái)堅(jiān)持追求的企業(yè)文化。 創(chuàng)新互聯(lián)建站是您可以信賴的網(wǎng)站建設(shè)服務(wù)商、專業(yè)的互聯(lián)網(wǎng)服務(wù)提供商! 專注于成都網(wǎng)站設(shè)計(jì)、網(wǎng)站制作、軟件開發(fā)、設(shè)計(jì)服務(wù)業(yè)務(wù)。我們始終堅(jiān)持以客戶需求為導(dǎo)向，結(jié)合用戶體驗(yàn)與視覺傳達(dá)，提供有針對(duì)性的項(xiàng)目解決方案，提供專業(yè)性的建議，創(chuàng)新互聯(lián)建站將不斷地超越自我，追逐市場(chǎng)，引領(lǐng)市場(chǎng)！

區(qū)別

1.從屬關(guān)系區(qū)別

@import是 CSS 提供的語(yǔ)法規(guī)則，只有導(dǎo)入樣式表的作用；link是HTML提供的標(biāo)簽，不僅可以加載 CSS 文件，還可以定義 RSS、rel 連接屬性等。

2.加載順序區(qū)別

加載頁(yè)面時(shí)，link標(biāo)簽引入的 CSS 被同時(shí)加載； @import 引入的 CSS 將在頁(yè)面加載完畢后被加載。

3.兼容性區(qū)別

@import是 CSS2.1 才有的語(yǔ)法，故只可在 IE5+ 才能識(shí)別；link標(biāo)簽作為 HTML 元素，不存在兼容性問題。

4.DOM可控性區(qū)別

可以通過 JS 操作 DOM ，插入link標(biāo)簽來(lái)改變樣式；由于DOM方法是基于文檔的，無(wú)法使用 @import 的方式插入樣式。

5.權(quán)重區(qū)別

link引入的樣式權(quán)重大于@import引入的樣式。（？？？）

我們?cè)诰W(wǎng)上搜索關(guān)于這兩者的區(qū)別的時(shí)候通常會(huì)看見有第5條這么一個(gè)說(shuō)法。難道第5條真的是這樣嗎？有待商榷。

所以這里我們就通過幾個(gè)demo來(lái)驗(yàn)證一下第五條

再驗(yàn)證之前我們先來(lái)說(shuō)說(shuō)css權(quán)重的相關(guān)概念：

css的權(quán)重指的是選擇器的優(yōu)先級(jí)，CSS 選擇器的權(quán)重高，即選擇器的優(yōu)先級(jí)高。

css的優(yōu)先級(jí)表現(xiàn)在，對(duì)同一個(gè)html元素設(shè)置元素的時(shí)候，不同選擇器的優(yōu)先級(jí)不同，優(yōu)先級(jí)低的樣式將會(huì)被優(yōu)先極高的樣式所覆蓋。

css的權(quán)重優(yōu)先級(jí)表現(xiàn)為：

!important > 行內(nèi)樣式 > ID > 類、偽類、屬性 > 標(biāo)簽名 > 繼承 > 通配符

為了便于理解權(quán)重的計(jì)算方式，我們按以下方式進(jìn)行數(shù)值假設(shè)分析：

demo:

學(xué)習(xí)Q-q-u-n： 784783012 ，分享學(xué)習(xí)的方法和需要注意的小細(xì)節(jié)，不停更新最新的教程和學(xué)習(xí)技巧
（從零基礎(chǔ)開始到前端項(xiàng)目實(shí)戰(zhàn)教程，學(xué)習(xí)工具，全棧開發(fā)學(xué)習(xí)路線以及規(guī)劃）



    
    
    


    

        
            
                
        
    

根據(jù)上述計(jì)算得知：這個(gè)按鈕應(yīng)該是黃色背景，白色字體。

這里又回到我們的主題：link引入的樣式權(quán)重真的大于@import嗎？

難道引入css的方式也會(huì)有權(quán)重嗎？

上demo：

/* green.css */
div {
    background-color: green;
    border: 3px solid red;
}

/* yellow.css */
div {
    background-color: yellow;
    border: 3px solid black;
}

/* blue.css */
@import url("green.css");
div{
    background-color: blue;
}

eg1）

eg2）

對(duì)比1和2兩個(gè)例子，我們發(fā)現(xiàn)link和@import這兩種引入css的方式并沒有權(quán)重方面概念，只是單純的展示出css的層疊行罷了。即寫在后邊都樣式會(huì)覆蓋前面的樣式。

eg3）

    
    
    
    


    

    


學(xué)習(xí)Q-q-u-n： 784783012 ，分享學(xué)習(xí)的方法和需要注意的小細(xì)節(jié)，不停更新最新的教程和學(xué)習(xí)技巧
（從零基礎(chǔ)開始到前端項(xiàng)目實(shí)戰(zhàn)教程，學(xué)習(xí)工具，全棧開發(fā)學(xué)習(xí)路線以及規(guī)劃）

eg4）

分析實(shí)例3和實(shí)例4的結(jié)果可知：

對(duì)于實(shí)例3，我們看到紅色邊框，證明內(nèi)聯(lián)樣式中使用@import引入的green.css已經(jīng)生效，但其背景樣式被內(nèi)聯(lián)樣式中的粉色背景層疊掉，這個(gè)現(xiàn)象表明，@import不只是如我們看到的那樣，處于內(nèi)聯(lián)樣式頂部，其被引入的樣式，在結(jié)構(gòu)上，也確實(shí)是被置于內(nèi)聯(lián)樣式之前，所以內(nèi)聯(lián)樣式才能夠?qū)盈B掉它。

同理，實(shí)例4中，在link標(biāo)簽引入的blue.css文件內(nèi)，頂部同樣存在@import引入的green.css，紅色邊框依然可以證明，green.css已經(jīng)生效，但其背景樣式被blue.css本身的藍(lán)色背景層疊掉，@import引入的樣式在blue.css中也是被置于它本身樣式之前的。

所以由上述實(shí)例證明link引入的樣式權(quán)重大于@import引入的樣式這么說(shuō)是不太合理的。

疑點(diǎn)？

我們上邊也說(shuō)了關(guān)于link和@import的區(qū)別，在加載頁(yè)面的時(shí)候，不是說(shuō)在link引入的css樣式的時(shí)候會(huì)先于@import加載嗎？那為啥link引入的樣式又會(huì)覆蓋掉@import引入的樣式?。?/strong>

首先我們來(lái)回顧一下關(guān)于瀏覽器執(zhí)行過程的一些概念：

加載：根據(jù)請(qǐng)求的url進(jìn)行域名解析，然后向服務(wù)器發(fā)送請(qǐng)求，接收響應(yīng)文件（如HTML、CSS、JS、圖片等）。

解析：對(duì)加載到的資源（HTML、CSS、JS等）進(jìn)行語(yǔ)法解析，構(gòu)建響應(yīng)的內(nèi)部數(shù)據(jù)結(jié)構(gòu)（如HTML的DOM樹，JS對(duì)象的屬性表，css樣式規(guī)則等）。

渲染：構(gòu)建渲染樹，對(duì)各個(gè)元素進(jìn)行位置計(jì)算、樣式計(jì)算等，然后根據(jù)渲染書完成頁(yè)面的布局及繪制的過程（產(chǎn)生頁(yè)面的元素）。

所以根據(jù)我們上述的瀏覽器執(zhí)行過程的理解以后，我們我繼續(xù)提出疑問：

link先于@import加載，是不是也先于@import渲染呢？

實(shí)際上，瀏覽器渲染的動(dòng)作一般會(huì)執(zhí)行多次的。最后一次渲染，一定是基于之前加載過的所有樣式整合后渲染樹進(jìn)行繪制頁(yè)面的，已經(jīng)被渲染過的頁(yè)面元素，也會(huì)被重新渲染。

那么我們就可以把@import這種導(dǎo)入 CSS 文件的方式理解成一種替換，CSS 解析引擎在對(duì)一個(gè) CSS 文件進(jìn)行解析時(shí)，如在文件頂部遇到@import，將被替換為該@import導(dǎo)入的 CSS 文件中的全部樣式。

終于弄明白為何@import引入的樣式，會(huì)被層疊掉了。其雖然后被加載，卻會(huì)在加載完畢后置于樣式表頂部，最終渲染時(shí)自然會(huì)被下面的同名樣式層疊。