class 和 id 的使用场景?

id对应css是用样式选择符“#”，只能被一个元素调用，id适用于定义结构和大的板块。
class对应css是用样式选择符“.”，可以用于被多个元素调用，重复引用样式，使用class。

CSS选择器常见的有几种?

1. 基础选择器

2. 组合选择器

3. 属性选择器

4. 伪类选择器

5. 伪元素选择器

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

1. 在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式
2. 作为style属性写在元素标签上的内联样式
3. id选择器
4. 类选择器
5. 伪类选择器
6. 属性选择器
7. 标签选择器
8. 通配符选择器
9. 浏览器自定义
   行内样式 <div style="xxx"></div> ==> a
   ID 选择器 ==> b
   类，属性选择器和伪类选择器 ==> c
   标签选择器、伪元素 ==> d
   比较相同级别a、b、c、d的数量。a的值大，则优先级高，如果a的值相同，则b的值大的优先级高，以此类推。

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

1. a:link
2. a:visited
3. a:hover
4. a:active

• link:连接平常的状态
• visited:连接被访问过之后
• hover:鼠标放到连接上的时候
• active:连接被按下的时候
  按照平时点击鼠标的顺序应该是a:link, a:hover, a:active, a:visited，但由于相同优先级别的选择器，后面的样式会覆盖前面的样式。当点击完鼠标后，a:visited的样式会一直存在，覆盖掉前面的样式，所以要使a:hover,和a:active的样式不被覆盖，要将a:visited放在a:hover,和a:active的前面。

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

#header{
}

匹配id="header"的元素

.header{
}

匹配class="header"的元素

.header .logo{
}

匹配class="header"的所有后代中class="logo"的元素

.header.mobile{
}

匹配class="header"并且class="mobile"的元素

.header p, .header h3{
}

匹配class="header"中所有后代p元素和h3元素

#header .nav>li{
}

匹配id="header"中所有后代nav元素中的子元素li元素

#header  a.hover{
}

匹配id="header"中所有后代中鼠标处于hover状态的a元素

#header  .logo~p{
}

匹配id="header"中所有后代class="logo"元素后面的同级p元素

#header  input[type="text"]{
}

匹配id="header"中所有后代中input标签type="text"的元素

列出你知道的伪类选择器

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

• div:first-child：匹配div的父元素下的第一个div子元素
• div:first-of-type：匹配div的父元素下第一个div子元素类型的每个元素
• div :first-child：匹配div下的第一个子元素
• div :first-of-type匹配div下的同类型的第一个元素

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

结果如图：

代码中有两个样式：

.item1:first-child{
  color: red;
}
.item1:first-of-type{
  background: blue;
}

先解析第一个样式

.item1:first-child{
  color: red;
}

匹配class="item1"的其父元素下的第一个元素，即class="ct"下面的第一个元素p元素，所以aa为红色。
再解析第二个样式：

.item1:first-of-type{
  background: blue;
}
匹配class="item1"的其父元素下的同类型的第一个元素，class="ct"下有两种类型元素p元素和h3元素，分别取第一个元素，所以aa和bb的背景色为蓝色。