溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
關于@import和link引入樣式的區別網上有很多種說法。大致有如下幾種，不過這其中會有我存疑的地方，我們可以一起來探討一下。
@import是 CSS 提供的語法規則，只有導入樣式表的作用；link是HTML提供的標簽，不僅可以加載 CSS 文件，還可以定義 RSS、rel 連接屬性等。
加載頁面時，link標簽引入的 CSS 被同時加載； @import 引入的 CSS 將在頁面加載完畢后被加載。
@import是 CSS2.1 才有的語法，故只可在 IE5+ 才能識別；link標簽作為 HTML 元素，不存在兼容性問題。
可以通過 JS 操作 DOM ，插入link標簽來改變樣式；由于DOM方法是基于文檔的，無法使用 @import 的方式插入樣式。
link引入的樣式權重大于@import引入的樣式。（？？？）
我們在網上搜索關于這兩者的區別的時候通常會看見有第5條這么一個說法。難道第5條真的是這樣嗎？有待商榷。
所以這里我們就通過幾個demo來驗證一下第五條
再驗證之前我們先來說說css權重的相關概念：
css的權重指的是選擇器的優先級，CSS 選擇器的權重高，即選擇器的優先級高。
css的優先級表現在，對同一個html元素設置元素的時候，不同選擇器的優先級不同，優先級低的樣式將會被優先極高的樣式所覆蓋。
css的權重優先級表現為：
!important > 行內樣式 > ID > 類、偽類、屬性 > 標簽名 > 繼承 > 通配符
為了便于理解權重的計算方式，我們按以下方式進行數值假設分析：
demo:
學習Q-q-u-n： 784783012 ，分享學習的方法和需要注意的小細節，不停更新最新的教程和學習技巧
（從零基礎開始到前端項目實戰教程，學習工具，全棧開發學習路線以及規劃）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#myid { /* id選擇器權重為100 */
background-color: pink;
}
#divid .myspan input { /* 權重為 100 + 10 + 1 = 111 */
background-color: yellow;
}
input[type="button"] { /* 權重為 10 */
color: white !important; /* !important權重為無窮大 */
}
input.myclass { /* 此為標簽指定式選擇器，權重為 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樣式的權重為1000 -->
</span>
</div>
</body>
</html>根據上述計算得知：這個按鈕應該是黃色背景，白色字體。
這里又回到我們的主題：link引入的樣式權重真的大于@import嗎？
難道引入css的方式也會有權重嗎？
上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標簽引入yellow.css，內聯樣式引入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\. 內聯樣式引入green.css，link標簽引入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兩個例子，我們發現link和@import這兩種引入css的方式并沒有權重方面概念，只是單純的展示出css的層疊行罷了。即寫在后邊都樣式會覆蓋前面的樣式。
eg3）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- 實例3\. 內聯樣式引入green.css，內聯樣式中設置粉色背景 -->
<style type="text/css">
@import url("green.css");
div {
background-color: pink;
}
</style>
</head>
<body>
<div ></div>
<!-- 盒子為粉色背景，紅色邊框，即green.css已生效，但背景色被內聯樣式層疊為粉色 -->
</body>
</html>
學習Q-q-u-n： 784783012 ，分享學習的方法和需要注意的小細節，不停更新最新的教程和學習技巧
（從零基礎開始到前端項目實戰教程，學習工具，全棧開發學習路線以及規劃）eg4）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- 實例4\. link標簽引入blue.css，blue.css中引入green.css -->
<link rel="stylesheet" href="blue.css">
</head>
<body>
<div ></div>
<!-- 盒子為藍色背景，紅色邊框，即green.css已生效，但背景色被blue.css層疊為藍色 -->
</body>
</html>分析實例3和實例4的結果可知：
對于實例3，我們看到紅色邊框，證明內聯樣式中使用@import引入的green.css已經生效，但其背景樣式被內聯樣式中的粉色背景層疊掉，這個現象表明，@import不只是如我們看到的那樣，處于內聯樣式頂部，其被引入的樣式，在結構上，也確實是被置于內聯樣式之前，所以內聯樣式才能夠層疊掉它。
同理，實例4中，在link標簽引入的blue.css文件內，頂部同樣存在@import引入的green.css，紅色邊框依然可以證明，green.css已經生效，但其背景樣式被blue.css本身的藍色背景層疊掉，@import引入的樣式在blue.css中也是被置于它本身樣式之前的。
所以由上述實例證明link引入的樣式權重大于@import引入的樣式這么說是不太合理的。
我們上邊也說了關于link和@import的區別，在加載頁面的時候，不是說在link引入的css樣式的時候會先于@import加載嗎？那為啥link引入的樣式又會覆蓋掉@import引入的樣式啊？
首先我們來回顧一下關于瀏覽器執行過程的一些概念：
加載： 根據請求的url進行域名解析，然后向服務器發送請求，接收響應文件（如HTML、CSS、JS、圖片等）。
解析： 對加載到的資源（HTML、CSS、JS等）進行語法解析，構建響應的內部數據結構（如HTML的DOM樹，JS對象的屬性表，css樣式規則等）。
渲染： 構建渲染樹，對各個元素進行位置計算、樣式計算等，然后根據渲染書完成頁面的布局及繪制的過程（產生頁面的元素）。
所以根據我們上述的瀏覽器執行過程的理解以后，我們我繼續提出疑問：
link先于@import加載，是不是也先于@import渲染呢？
實際上，瀏覽器渲染的動作一般會執行多次的。最后一次渲染，一定是基于之前加載過的所有樣式整合后渲染樹進行繪制頁面的，已經被渲染過的頁面元素，也會被重新渲染。
那么我們就可以把@import這種導入 CSS 文件的方式理解成一種替換，CSS 解析引擎在對一個 CSS 文件進行解析時，如在文件頂部遇到@import，將被替換為該@import導入的 CSS 文件中的全部樣式。
終于弄明白為何@import引入的樣式，會被層疊掉了。其雖然后被加載，卻會在加載完畢后置于樣式表頂部，最終渲染時自然會被下面的同名樣式層疊。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
