溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

web前端入門到實戰(zhàn)：@import和link引入樣式的區(qū)別

發(fā)布時間：2020-07-12 11:14:24 來源：網(wǎng)絡(luò) 閱讀：272 作者：前端向南 欄目：web開發(fā)

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

區(qū)別

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

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

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

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

3.兼容性區(qū)別

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

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

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

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

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

我們在網(wǎng)上搜索關(guān)于這兩者的區(qū)別的時候通常會看見有第5條這么一個說法。難道第5條真的是這樣嗎？有待商榷。

所以這里我們就通過幾個demo來驗證一下第五條

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

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

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

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

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

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

web前端入門到實戰(zhàn)：@import和link引入樣式的區(qū)別

demo:

學(xué)習(xí)Q-q-u-n： 784783012 ，分享學(xué)習(xí)的方法和需要注意的小細(xì)節(jié)，不停更新最新的教程和學(xué)習(xí)技巧
（從零基礎(chǔ)開始到前端項目實戰(zhàn)教程，學(xué)習(xí)工具，全棧開發(fā)學(xué)習(xí)路線以及規(guī)劃）
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        #myid { /* id選擇器權(quán)重為100 */
            background-color: pink;
        }
        #divid .myspan input { /* 權(quán)重為 100 + 10 + 1 = 111 */
            background-color: yellow;
        }
        input[type="button"] { /* 權(quán)重為 10 */
            color: white !important; /* !important權(quán)重為無窮大 */
        }
        input.myclass { /* 此為標(biāo)簽指定式選擇器，權(quán)重為 1 + 10 = 11 */
            color: black;
        }
    </style>
</head>
<body>
    <div id="divid">
        <span class="myspan">
            <input type="button" id="myid" class="myclass" name="myname"
                value="點我" >
                <!-- style樣式的權(quán)重為1000 -->
        </span>
    </div>
</body>
</html>

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

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

難道引入css的方式也會有權(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）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- 實例1\. link標(biāo)簽引入yellow.css，內(nèi)聯(lián)樣式引入green.css -->
    <link rel="stylesheet" href="yellow.css">
    <style type="text/css">
        @import url("green.css");
    </style>
</head>
<body>
    <div ></div>
    <!-- 盒子為，綠色背景，紅色邊框，即green.css生效 -->
</body>
</html>

eg2）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- 實例2\. 內(nèi)聯(lián)樣式引入green.css，link標(biāo)簽引入yellow.css -->
    <style type="text/css">
        @import url("green.css");
    </style>
    <link rel="stylesheet" href="yellow.css">
</head>
<body>
    <div ></div>
    <!-- 盒子為黃色背景，黑色邊框，即yellow.css生效 -->
</body>
</html>

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

eg3）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- 實例3\. 內(nèi)聯(lián)樣式引入green.css，內(nèi)聯(lián)樣式中設(shè)置粉色背景 -->
    <style type="text/css">
        @import url("green.css");
        div {
            background-color: pink;
        }
    </style>
</head>
<body>
    <div ></div>
    <!-- 盒子為粉色背景，紅色邊框，即green.css已生效，但背景色被內(nèi)聯(lián)樣式層疊為粉色 -->
</body>
</html>
學(xué)習(xí)Q-q-u-n： 784783012 ，分享學(xué)習(xí)的方法和需要注意的小細(xì)節(jié)，不停更新最新的教程和學(xué)習(xí)技巧
（從零基礎(chǔ)開始到前端項目實戰(zhàn)教程，學(xué)習(xí)工具，全棧開發(fā)學(xué)習(xí)路線以及規(guī)劃）

eg4）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- 實例4\. link標(biāo)簽引入blue.css，blue.css中引入green.css -->
    <link rel="stylesheet" href="blue.css">
</head>
<body>
    <div ></div>
    <!-- 盒子為藍色背景，紅色邊框，即green.css已生效，但背景色被blue.css層疊為藍色 -->
</body>
</html>

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

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

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

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

疑點？

我們上邊也說了關(guān)于link和@import的區(qū)別，在加載頁面的時候，不是說在link引入的css樣式的時候會先于@import加載嗎？那為啥link引入的樣式又會覆蓋掉@import引入的樣式啊？

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

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

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

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

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

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

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

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

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

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手