> 1、CSS 加载方式有几种？
css加载方式主要有一下几种：
1. 在html中通过<link rel="stylesheet" herf="xxx.css">引入当前文件夹下的xxx.css，注意css路径，如果xxx.css在当前文件夹下的二级或多级子文件下，需要写清楚逐级路径；
2. 在head或html中直接写style标签，在style标签中写入css，建议写在head中；
3. 在css文件（xxx.css文件中或html的style标签内）中通过@import('xxx.css')/@import(url('xxx.css'))引入css文件，同样注意路径；
4. 通过内联样式直接对某个元素引入css样式，直接将样式写在该元素标签内，通过style"属性：样式"的格式，如:
```
<p style="color:red;background:blue;">你好</p>
```
即可将你好设置成红色
> 2. CSS选择器常见的有几种？
css常见选择器主要有：
1. 基础选择器：* 选择页面所有元素，# id选择器，. 类选择器和标签选择器；
2. 组合选择器(E、F分别为任一种基础选择器)：E,F E和F元素都被选中，E F E下的所有F子元素，E>F E下直接子元素F，E+F E元素直接相邻的F元素；E~F E元素的所有F邻居元素；EF既是E又是F的元素。
3. 属性选择器：E[attr] 选择拥有attr属性的E元素，E[attr=value] 选择attr属性为value的E元素，如:`input[type=password]` 即可选中password类型的input表单。
4. 伪类选择器：
①a链接伪类选择器：a:link 未被点击的a链接，a:hover 鼠标悬浮在其上的a标签，a:visited 跳转过的a标签，a:active 鼠标按下但未松开的a标签
②表单中伪类选择器：E：enabled/disabled 匹配表单中可用/禁用的元素，E:checked 匹配表单中选中的radio或checkbox元素，E：seletion 选中用户当前选择的元素
③:first-child/:last-child/:nth-child(n)和:first-of-type/:nth-of-type()，具体区别如下：
E:first-child/E:last-child/E:nth-child(n) 匹配E元素的父元素下第一个/最后一个/第n个子元素；
E:first-of-type/E:nth-of-type(n) 匹配E元素的父元素下同类型元素（标签相同为相同类型）中第一个/第n个子元素
5. 伪元素选择器：E::before/E::after/E::selection/E::first-letter/E::first-line（css2 中一个冒号）
E::before/E::after 在E元素内部前面/后面插入元素
E::first-letter 选中一整块文字第一行的第一个字母，当文字所处的行之前没有其他内容（如图片和内联的表格）。
E::first-line 将样式只应用于一个块状元素的首行。
> 3、选择器的优先级如何计算？
- 基础选择器优先级：！important > style内联样式 > id选择器 > 类选择器 > 伪类选择器 > 属性
- 对于较复杂的情况可通过如下方式比较：
统计选择器中行内样式数为a，id选择器数量为b，类、伪类、属性选择器数量一共为c、标签选择器、属性选择器数量为d，这样的话对于每一个复杂选择器都有一个对应[a,b,c,d]值，依次从a~d比较选择器的值，值大的优先级高，直到比较出谁高为止。
- 另外，相同优先级选择器来设置style时，后面的设置会覆盖前面的设置。
网友评论