1.class 和 id 的使用场景?

• class用于网页中样式的设置，同一元素可以定义多种样式（多个class),同一class可以被运用到不同元素上（不同元素class取值一样）。
• id用来作为文档内某一元素的唯一标识，不可以被重复命名，且id的权重比class的权重高很多，多用于js操作中实现元素的获取。

2.CSS选择器常见的有几种?

1.基础选择器

• * 通用元素选择器，匹配页面任何元素（这也就决定我们很少使用）
• # id选择器，匹配特定id的元素
• .class 类选择器，匹配class包含（不是等于）特定类的元素
• element 标签选择器
  如下：

*{
margin:0;
padding:0;
}
#id-selector{
  color:red;
}
.class-selector{
background:black;
}
p{
font-size:20px;
}

2.组合选择器

• E,F 多元素选择器，用,分隔，同时匹配元素E或者元素F。
• E F 后代选择器，用空格分隔，匹配E元素所有的后代元素（不只是子元素、子元素向下递归）元素F。
• E>F 子元素选择器，用>分隔，匹配E元素的所有直接子元素。
• E+F 直接相邻选择器，匹配E元素之后的相邻的同级元素F。
• E~F 普通相邻选择器（弟弟选择器），匹配E元素之后的同级元素F(无论直接相邻与否）。
• .class1.class2 id和class选择器和选择器连写的时候中间没有分隔符，.和#本身充当分隔符的元素。
• element#id id和class选择器和选择器连写的时候中间没有分隔符，.和#本身充当分隔符的元素。

3.属性选择器

• E[attr] 匹配所有具有属性attr的元素，div[id]就能取得所有有id属性的div.
• E[attr=value] 匹配属性attr值为value的元素，div[id=test],匹配id=test的div。
• E[attr~=value] 匹配所有属性attr具有多个空格分隔、其中一个值等于value的元素。
• E[attr^=value] 匹配属性attr的值以value开头的元素。
• E[attr$=value] 匹配属性attr的值以value结尾的元素。
• E[attr*=value] 匹配属性attr的值value包含的元素

4.伪类选择器

• E:first-child 匹配作为长子（第一个子女）的元素E
• E:link 匹配所有未被点击的链接
• E:visited 匹配所有已被点击的链接
• E:active 匹配鼠标已经将其按下，还没有释放的E元素
• E:hover 匹配鼠标悬停其上的E元素
• E:focus 匹配获得当前焦点的E元素
• E:lang(c) 匹配lang属性等于c的E元素
• E:enabled 匹配表单中可用的元素
• E:disabled 匹配表单中禁用的元素
• E:checked 匹配表单中被选中的 radio或者checkbox元素
• E::selectionz 匹配用户当前选中的元素
  （所以的选择器列表在MDN）

5.伪类选择器

• E:root 匹配文档的根元素，对于HTML文档，就是HTML元素
• E:nth-child(n) 匹配其父元素的第n个子元素，第一个编号为1
• E:nth-last-child(n) 匹配其父元素的倒数第n个子元素，第一个标号为1
• E:nth-of-type(n) 与nth-child类似，但是仅匹配使用同种标签的元素
• E:nth-last-of-type(n) 与nth-last-child类似，但是仅匹配使用同种标签的元素
• E:last-child 匹配其父元素的最后一个子元素，等同于nth-last-child(1)
• E:first-of-type 匹配父元素下使用同种标签的第一个子元素，等同于nth-of-type(1)
• E:last-of-type 匹配父元素下使用同种标签的最后一个子元素，等同于nth-last-of-type(1)
• E:only-child 匹配父元素下仅有的一个子元素，等同于first-child、last-child、nth-child(1)、nth-last-child(1)
• E:only-of-type 匹配其父元素下使用同种标签的唯一一个子元素，等同于first-of-type、last-of-type、nth-of-type(1)、nth-last-of-type(1)
• E:empty 匹配一个不包含任何子元素的元素，文本节点也被看做子元素
• E:not(selector) 匹配不符合当前选择器的任何元素

n的取值：

• 1,2,3,4,5
• 2n+1,2n,4n-1
• odd,even

5.伪元素选择器

• E::first-line 匹配E元素内容的第一行
• E::first-letter 匹配E元素内容的第一个字母
• E::before 在E元素之前插入生成的内容
• E::after 在E元素之后插入生成的内容

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

• 优先级
  1.在属性后面使用！important会覆盖页面内任何位置定义的元素样式
  2.作为style属性写在元素标签上的内联属性
  3.id选择器
  4.类选择器
  5.伪类选择器
  6.属性选择器
  7.标签选择器
  8.通配符选择器
  9.浏览器自定义
• 复杂场景如何计算优先级
  行内样式<div style="xxx"></div>==>a
  id选择器==>b
  类，属性选择器和伪类选择器==>c
  标签选择类、伪元素==>d

*   {}    /*    a=0 b=0 c=0 d=0  ->0,0,0,0 */
p  {}    /*    a=0 b=0 c=0 d=1 ->0,0,0,1*/
a:hover   {}   /* a=0 b=0 c=1 d=1 ->0,0,1,1 */
ul li   {}   /* a=0 b=0 c=0 d=2 ->0,0,0,2 */
ul  ol+li    {}    /* a=0 b=0 c=0 d=3 ->0,0,0,3 */
h1+input[type=hidden]  {}  /* a=0 b=0 c=1 d=2 ->0,0,1,2 */
ul ol li.active  {}    /* a=0 b=0 c=1 d=3 ->0,0,1,3 */
#ct .box p  {}  /*  a=0 b=1 c=1 d=1 ->0,1,1,1*/
div#header:after  {}  /*a=0 b=1 c=0 d=2 ->0,1,0,2*/
style=" "   {}    /* a=1 c=0 c=0 d=0 ->1,0,0,0*/

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

a:link 、a:visited 、a:hover 、a:active（LoVe/HAte)

• link 链接平常的状态
• visited 链接被访问过之后的状态
• hover 鼠标放在链接上面的，还未松开的时候
• active 链接被按下的时候
• 举例：
  若让未访问链接颜色为蓝色，活动链接为绿色，已访问链接为红色；
  第一种情况：定义的顺序为a:visited、a:hover、a:link，这时会发现，把鼠标放在未访问过的蓝色链接上，它并不变成绿色，只有放在已访问的红色链接上，链接才会变绿；
  第二种情况：定义的顺序为：a:link、a:visited、a:hover，这时无论鼠标经过的链接有没有被访问，它都会变成绿色；
  这是因为，一个鼠标经过的未访问链接同时拥有a:link、a:hover两种属性，在第一种情况下，a:link离它最近，所以它优先满足a:link，而放弃a:hover的重复定义。第二种情况，无论链接有没有被访问过，它首先要检查是否符合a:hover的标准（即是否有鼠标经过它），满足，则变成绿色，不满足，则继续向上查找，一直找到满足条件的定义为止。
• 所以：1.鼠标经过的"未访问链接"同时拥有a:link、a:hover两种属性，后面的属性会覆盖前面的属性定义；
• 2.鼠标经过的"已访问链接”同时拥有a:visited、a:hover两种属性，后面的属性会覆盖前面的属性定义；

所以，a:hover定义一定要放在a:link、a:visited的后面

5.

#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的元素且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元素

6.列出你知道的伪类选择器

E:first-child 匹配作为长子（第一个子女）的元素E
E:link 匹配所有未被点击的链接
E:visited 匹配所有已被点击的链接
E:active 匹配鼠标已经将其按下，还没有释放的E元素
E:hover 匹配鼠标悬停其上的E元素
E:focus 匹配获得当前焦点的E元素
E:lang(c) 匹配lang属性等于c的E元素
E:enabled 匹配表单中可用的元素
E:disabled 匹配表单中禁用的元素
E:checked 匹配表单中被选中的 radio或者checkbox元素
E::selectionz 匹配用户当前选中的元素
E:root 匹配文档的根元素，对于HTML文档，就是HTML元素
E:nth-child(n) 匹配其父元素的第n个子元素，第一个编号为1
E:nth-last-child(n) 匹配其父元素的倒数第n个子元素，第一个标号为1
E:nth-of-type(n) 与nth-child类似，但是仅匹配使用同种标签的元素
E:nth-last-of-type(n) 与nth-last-child类似，但是仅匹配使用同种标签的元素
E:last-child 匹配其父元素的最后一个子元素，等同于nth-last-child(1)
E:first-of-type 匹配父元素下使用同种标签的第一个子元素，等同于nth-of-type(1)
E:last-of-type 匹配父元素下使用同种标签的最后一个子元素，等同于nth-last-of-type(1)
E:only-child 匹配父元素下仅有的一个子元素，等同于first-child、last-child、nth-child(1)、nth-last-child(1)
E:only-of-type 匹配其父元素下使用同种标签的唯一一个子元素，等同于first-of-type、last-of-type、nth-of-type(1)、nth-last-of-type(1)
E:empty 匹配一个不包含任何子元素的元素，文本节点也被看做子元素
E:not(selector) 匹配不符合当前选择器的任何元素

7.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后代使用同种标签的第一个子元素

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

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

运行效果如下：

b5ec69687ad61899bf89496bb178eef.png