css选择器

1、class 和 id 的使用场景?

class选择含有相同类名的一类元素，可以大量使用，适用于具有相同特点的元素。
id选择完全匹配id名的唯一元素，应减少使用，适用于具有特殊性的元素。

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

基础选择器：通用元素选择器、id选择器、类选择器、标签选择器。
组合选择器：多元素选择器、后代选择器、子元素选择器、直接相邻选择器、普通相邻选择器、兼有选择器（.class1.class2或elment.#id）。
属性选择器：E[attr] 、E[attr = value]等。
伪类选择器：E:link、E:visited、E:active、E:hover、E:focus、E:first-child 、E:checked、E::selection、E:nth-child(n)、E:nth-last-child(n)、E:nth-of-type(n)等。
伪元素选择器：E::first-line、E::first-letter、E::before、E::after

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

1、选择器的优先级：
(1)单独属性>全体属性；
(2)直接属性>继承属性；
(3)!important属性>内联样式>内部样式=外部样式；
(4)相同优先级的规则，写在后面的会覆盖前面的。
(5)id选择器>>类选择器>伪类选择器=属性选择器>>标签选择器=伪元素>通配符选择器>浏览器自定义。 (注：>>表示优先一个级别，>表示同一级别略优先，=表示优先级相同)
2、复杂场景下列出a,b,c三值数组比较
记ID选择器的个数为a
记类选择器、伪类选择器、属性选择器的个数为b
记类型选择器（元素名）、伪元素选择器的个数为c
忽略所有的通配选择器（*）
注意：
将a, b,c连接起来构成整个选择符的优先级。

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

顺序：a:link/a:visited,a:hover,a:active。
理由：1.四个选择器优先级相等，后面的样式会覆盖前面的样式。
2.a:link/a:visited是基于链接不同的状态定义因此不会冲突，二者顺序无所谓。
3.a:hover是当鼠标悬停于链接的样式，鼠标悬停时和链接不同状态的样式都会生效因此后面的会覆盖前面的，为了让鼠标悬停产生效果就应该放在a:link/a:visited后面。
4.a:active是鼠标点击为离开链接的样式，鼠标点击未离开链接时，鼠标自然也就悬停在链接上方，二者都会生效，后面的覆盖前面的，为了让鼠标点击产生效果就应该放在a:hover后面。

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

 #header{}                     id名为head的元素
.header{}                      类名包括“header”的元素
.header .logo{}                .header后代中的.logo
.header.mobile{}                类名兼有“header”和“mobile”的元素
.header p, .header h3{}        .header后代中的p和h3   
#header .nav>li{}               #header后代中的.nav的子元素中的li
#header a:hover{}               #header后代中的a元素鼠标悬停
#header .logo~p{}               #header后代中的.logo后的与其同级的p元素
#header input[type="text"]{}    #header后代中的具有type(属性)="text（值）"的input元素

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

选择器	含义
E:first-child	匹配父元素的首个子元素中的每个E元素
E:link	匹配所有未被点击的链接
E:visited	匹配所有已被点击的链接
E:active	匹配鼠标已经其上按下、还没有释放的E元素
E:hover	匹配鼠标悬停其上的E元素
E:focus	匹配获得当前焦点的E元素
E:checked	匹配表单中被选中的radio或checkbox元素
E::selection	匹配用户当前选中的元素
E:nth-child(n)	匹配父元素的第n个子元素中的每个E元素，第一个编号为1
E:last-child	匹配父元素的末个子元素中的每个E元素，等同于:nth-last-child(1)
E:nth-last-child(n)	匹配父元素的倒数第n个子元素中的E元素，第一个编号为1
E:only-child	匹配父元素下仅有的一个子元素中的E元素，等同于:first-child:last-child或 :nth-child(1):nth-last-child(1)
E:first-of-type	匹配父元素的子元素中E元素中的首个元素，等同于:nth-of-type(1)
E:nth-of-type(n)	与:nth-child()作用类似，但是仅匹配使用同种标签的元素
E:last-of-type	匹配父元素的子元素中E元素的最后一个，等同于:nth-last-of-type(1)
E:nth-last-of-type(n)	与:nth-last-child() 作用类似，但是仅匹配使用同种标签的元素
E:only-of-type	匹配父元素的子元素中仅有的E元素，等同于:first-of-type:last-of-type或 :nth-of-type(1):nth-last-of-type(1)

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>

如图：

1、aa的color为red，因为它所在元素是.itme1的父元素.ct的第一个子元素。
2、aa和bb的background-color为bule，因为aa所在元素是.itme1的父元素.ct的子元素中第一个p标签，bb所在元素是.itme1的父元素.ct的子元素中第一个h3标签。