一、CSS 加载方式有几种？

1. 使用<link>标签，引入外部CSS文件
2. 使用@import（但只能在css中用或者在style标签中用），引入CSS文件
3. 将样式代码写在<style></style>标签中
4. 使用HTML标签的style属性（不建议）

二、@charset有什么作用？

定义样式表使用的字符集

三、@import有什么作用？如何使用？@import和link的区别

1. 引入css样式功能

2. (1). 在html中

<style type="text/css">
@import url(CSS文件路径地址);
</style> 

(2). 在css中
直接使用@import url(CSS文件路径地址);

3. (1). @import 为CSS服务；
   link是为当前的页服务，link标签除了可以加载CSS外，还可以做很多其它的事情，比如定义RSS，定义rel连接属性等
   (2). link引用的CSS会同时被加载，而@import引用的CSS 会等到页面全部被下载完再被加载
   (3). 兼容性的差别。由于@import是CSS2.1提出的所以老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题。
   (4). link支持使用Javascript控制DOM去改变样式；而@import不支持。

四、id 选择器和 class 选择器的使用场景分别是什么？

• id选择器使用前确定此元素权限较高且在文档里具有唯一性才可用，多用于页面分块的块级标签上。
• class选择器是使用的最广最多的选择器，可以给任何元素添加class属性，个标签可以有多个类且同一个类可以用到不同的标签上，多用于多个标签样式相似或完全相同时。

五、CSS选择器常见的有几种？

1.基础选择器
#id .class 标签选择器

2.组合选择器
E,F E F E>F E+F E~F .class1.class2 element#id

3.属性选择器
E[attr = value] 等

4.伪类选择器
E:first-child E:visited E:hover E:acitve E:focus E:nth-of-type(n)等

5.伪元素选择器
E::after E::before等

六、伪类选择器有哪些？伪元素有哪些？

伪类选择器
E:nth-child E:visited E:hover E:acitve E:focus E:nth-of-type(n)
E:disabled E:last-child E:last-of-type E:nth-last-child()
E:nth-last-of-type()

伪元素选择器
E::after E::before E::first-letter
E::first-line
E::selection

七、选择器的优先级是如何计算的

• 单个选择器的优先级

1. 在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式
2. 作为style属性写在元素标签上的内联样式
3. id选择器
4. 类选择器
5. 伪类选择器
6. 属性选择器
7. 标签选择器
8. 通配符选择器
9. 浏览器自定义

• 复杂场景优先级需要计算：

按权重由高到低作如下归类：

行内样式 <div style="xxx"></div> ==> a
ID 选择器 ==> b
类，属性选择器和伪类选择器 ==> c
标签选择器、伪元素 ==> d
当a权重相同的时候，比较b，以此类推，谁的权重大就显示谁的样式