当前位置：首页 > Web开发 > 正文

web前端入门到实战：@import和link引入样式的区别

2024-03-31 Web开发

标签：

关于@import和link引入样式的区别网上有很多种说法。大致有如下几种，不过这其中会有我存疑的地方，我们可以一起来探讨一下。

区别 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引入的样式。（？？？）

我们在网上搜索关于这两者的区别的时候通常会看见有第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> <span> <input type="button" value="点我">  </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>  <link href="http://www.mamicode.com/yellow.css"> <style type="text/css"> @import url("green.css"); </style> </head> <body> <div></div>  </body> </html>

eg2）

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title>  <style type="text/css"> @import url("green.css"); </style> <link href="http://www.mamicode.com/yellow.css"> </head> <body> <div></div>  </body> </html>

对比1和2两个例子，我们发现link和@import这两种引入css的方式并没有权重方面概念，只是单纯的展示出css的层叠行罢了。即写在后边都样式会覆盖前面的样式。

eg3）

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title>  <style type="text/css"> @import url("green.css"); div { background-color: pink; } </style> </head> <body> <div></div>  </body> </html> 学习Q-q-u-n： 784783012 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习技巧（从零基础开始到前端项目实战教程，学习工具，全栈开发学习路线以及规划）

温馨提示: 本文由Jm博客推荐，转载请保留链接: https://www.jmwww.net/file/web/39948.html

上一篇：CSS类的操作
下一篇：http服务读取配置文件，交叉编译

web前端入门到实战：@import和link引入样式的区别

推荐文章

热门文章

标签

友情链接

关于本站

联系我们

特别鸣谢