link和@import的區別

joshinrai發表於2019-07-16

相同點:

都是引入css樣式
複製程式碼

不同點:

1、從屬關係區別
    @import是 CSS 提供的語法規則,只有匯入樣式表的作用;link是HTML提供的標籤,不僅可以載入 CSS 檔案,還可以定義 RSS、rel 連線屬性等。
2、載入順序區別
    載入頁面時,link標籤引入的 CSS 被同時載入;@import引入的 CSS 將在頁面載入完畢後被載入。
3、相容性區別
    @import是 CSS2.1 才有的語法,故只可在 IE5+ 才能識別;link標籤作為 HTML 元素,不存在相容性問題。
4、DOM可控性區別
    可以通過 JS 操作 DOM ,插入link標籤來改變樣式;由於 DOM 方法是基於文件的,無法使用@import的方式插入樣式。
5、權重區別
    link引入的樣式權重大於@import引入的樣式。(相同的類名或者標籤名,而不是含有!impor之類的才生效)
複製程式碼

@import一定要寫在除@charset外的其他任何 CSS 規則之前,如果置於其它位置將會被瀏覽器忽略,而且,在@import之後如果存在其它樣式,則@import之後的分號是必須書寫,不可省略的

相關文章