前端面试宝典 每日一题（8）使用link和@import有什么区别？

🧑🏻‍写在前面的话：
这个系列文章可能开始，有人会觉得很low，我是打算从H5先开始整理，最后到常见的前端框架、以及一些前端常见的算法、leetcode的一些算法解析，感兴趣的小伙伴可以持续关注，每天分享一个前端知识点，希望大家一起进步。

今天整理的知识点是比较的简单，所以这篇文章就输出三个前端日常中经常使用的知识点，

通过前面几篇文章的整理，html方面的知识点，个人感觉基本上没有比较重要的，所以后续的几篇文章会着重去介绍css、css3方面的知识点。这也是符合我做这个系列文章的初心，从简单到难，这也符合我们事物发展的自然规律。

1.常见的css选择器都有那些？

1. 常见选择器

*	通用元素选择器，匹配任何元素
p	标签选择器，匹配所有使用E标签的元素
.info	class选择器，匹配所有class属性中包含info的元素
#box id选择器，匹配所有id属性等于footer的元素

2. 属性选择器

p[title] { color:#f00; }

td[headers~=col1] { color:#f00; }

3. 组合选择器

A, B	选中匹配 A 或/和 B 的元素
A B	选中匹配 B 且为匹配 A 的元素的后代元素(A B之间空格分开)
A > B	选中匹配 B 且为匹配 A 的元素的直接子元素
A + B	选中匹配 B 且为匹配 A 的元素的下一相邻元素
A ~ B	选中匹配 B 且为匹配 A 的元素的下 N 个相邻元素

4. 伪类选择器

a:link	匹配所有未被点击的链接
a:visited	匹配所有已被点击的链接
a:hover	匹配鼠标悬停其上的a元素
a:active	匹配鼠标已经其上按下、还没有释放的a元素
li:first-child	匹配父元素的第一个子元素li
li:last-child	匹配父元素的最后一个子元素li
li:nth-child(n)	匹配父元素的第n个子元素li（odd奇数，even偶数）

5. 伪元素选择器

E::before	在E元素内创建一个子元素，插入生成的内容作为伪元素，放在最前面
E::after	在E元素内创建一个子元素，插入生成的内容作为伪元素，放在最后面
E::selection	应用于文档中被用户高亮的部分（比如使用鼠标选中的部分）
E::first-letter	匹配E元素的第一个字母第一行的第一个字母
E::first-line	匹配E元素的第一行

2.css选择器优先级顺序？

ID 选择器， 如 #id{}

类选择器， 如 .class{}

属性选择器， 如 a[href="segmentfault.com"]{}

伪类选择器， 如 :hover{}

伪元素选择器， 如 ::before{}

标签选择器， 如 span{}

通配选择器， 如 *{}

3.使用link和@import有什么区别

1. link属于XHTML标签，除了加载CSS外，还能用于定义RSS（简易信息聚合，是一种基于XML标准，在互联网上被广泛采用的内容包装和投递协议），rel连接属性等作用；@import是CSS提供的，只能用于加载CSS；
2. 页面被加载时，link会同时被加载；而@import引用的CSS会等到页面被加载完成后再加载；
3. link是XHTML标签，没有兼容问题；而@import只有在IE5以上才能被识别；
4. link支持使用JavaScript控制DOM修改样式；而@import不支持。

这是关于css方面三个比较基础的知识点，从这篇文章之后我们可能整理的重心就要从html偏向css了，希望这样的整理对大家学习前端基础能够有所帮助，期待大家一起进步。