class和id的使用场景

• class用于主区块里面的详细内容，同一个class可以重复出现，一个标签可以有几个不同的class。
• id多使用于主要块级元素，id一个页面中只能出现一次，有些独一无二元素也可用id。

CSS选择器常见的有几种

• 基础选择器

• 组合选择器

• 属性选择器

• 伪类选择器

• 伪元素选择器

选择器的优先级是怎样的?对于复杂场景如何计算优先级？

选择器的优先级从高到低分别是

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

复杂场景优先级计算规则是

1. 行内样式计数1000；
2. id选择器计数100；
3. 类、属性、伪类选择器计数10；
4. 标签、伪元素选择器计数1；
5. 通过以上计数计算选择前的优先级结果，数字越大优先级越高。

a:link, a:hover, a:active, a:visited 的顺序是怎样的？ 为什么？

a:link -> a:visited -> a:hover -> a:active

• 鼠标经过的“未访问链接”同时拥有a:link、a:hover、a:active三种属性，后面的属性会覆盖前面的属性定义，所以a:link必须放在a:hover的前面，a:hover必须放在a:active的前
• 鼠标经过的“已访问链接”同时拥有a:visited、a:hover、a:link三种属性，后面的属性会覆盖前面的属性定义，此时a:visted和a:link必须放在a:hover的前面

以下选择器分别是什么意思?

• #header id名为header的元素
• .header class名为header的元素
• .header .logo class名为header的元素下的class名为logo的子元素
• .header.mobile class名同时为header和mobile的元素
• .header p, .header h3 class名为header的元素下所有的p子元素和h3子元素
• #header .nav>li id名为header的元素下的所有class名为nav的子元素的直接子元素li
• #header a:hover id名为header的元素下的所有a标签在鼠标悬停时的状态
• #header .logo~p id名为header的元素下的class名为logo的元素及其后面的同级p元素
• #header input[type="text"] id名为header的元素下的所有type属性为text的input元素

div:first-child、div:first-of-type、div :first-child和div :first-of-type的作用和区别 （注意空格的作用）

• div:first-child 父元素下第一个子元素且其必须为div元素
• div:first-of-type 父元素下第一个div元素
• div :first-child div元素下的所有后代的第一个子元素
• div :first-of-type div元素下的所有后代中标签相同的第一个子元素

运行代码，解析下输出样式的原因。

<style>
.item1:first-child{
  color: red;
}
.item1:first-of-type{
  background: blue;
}
</style>
 <div class="ct">
   <p class="item1">aa</p> // A
   <h3 class="item1">bb</h3> // B
   <h3 class="item1">ccc</h3> // C
 </div>

• A行作为.item1的父元素下的第一个子元素，文字颜色被改为红色；同时作为.item1的父元素下的第一个p元素，背景色改为蓝色。
• B行作为.item1的父元素下的第一个h3元素，背景色改为蓝色；但它不是其父元素的第一个子元素，文字颜色不变。
• C行既不是.item1的第一个子元素，也不是.item1的第一个h3元素，文字颜色和背景色都不变。