[email protected]底有什么区别？ ，相信小伙伴们对这个话题应该有所关注吧，[email protected]么区别？ 的相关资料，希望小伙伴们看了有所帮助。
写在前面在真正的前端开发中，我们很少去写行内样式和内嵌样式，通常都是去引用外部样式。
而在我们学习之初的外部样式表都是用link引入的，但是当后来我们学习的逐渐深入，[email protected]��式，这两者有什么区别呢，[email protected]！
区别<!DOCTYPE html><html lang="en"> <head> <link rel="stylesheet"rev="stylesheet"href="http://www.aidi.net.cn/article/detial/5748/mycss.css"type="text/css"> <style type="text/css"> @import url("./mycss.css"); </style> </head></html>这就是两种引用方式的常见用法，可以很清晰的看出
1、从属关系：link是html的标签，不仅可以加载 css 文件，还可以定义 RSS、rel 连接属性等；[email protected]，只有导入样式表的作用。2、加载顺序：页面被加载时，link会和html同时被加载而；@import引入的 css 将在页面加载完毕后被加载。3、兼容性：@import是 css2.1 才有的语法，所以只能在 IE5以上 才能识别；而link是 html 标签，所以不存在兼容性问题。4、DOM：Javascript只能控制dom去改变link标签引入的样式，[email protected]�[email protected]（如果对权重不是十分了解，可以看我之前的文章）@[email protected] 'style.css' //Windows IE4/ NS4, Mac OS X IE5, Macintosh [email protected]"style.css"//Windows IE4/ NS4, Macintosh [email protected] url(style.css) //Windows NS4, Macintosh [email protected] url('style.css') //Windows NS4, Mac OS X IE5, Macintosh [email protected] url("style.css") //Windows NS4, Macintosh NS4不识别由上分析知道，@import url(style.css) [email protected] url("style.css")是最优的选择，[email protected] url(style.css)最值得推荐。
结论@import是依赖css的，存在一定的兼容问题，并且根据浏览器渲染机制来说，他在dom树渲染完成后才会渲染，并且不能被js动态修改。
相比之下link兼容性较好，且dom元素的样式可以被js动态修改，[email protected]，[email protected]，link适用于自己写的且需要动态修改的样式。
经过实际的运用，相信在你真正书写和调整样式时一定可以如鱼得水。
来源：爱蒂网
