1.class选择器和id选择器的使用场景
class选择器为类选择器，同一个标签可以有多个类且一个类可以多次被调用，多用于多个标签样式相同或相似的时候。
ID选择器：同一个标签仅能有一个id选择器，且同一个id选择器仅能使用一次，优先级要高于class选择器。
2.常见的选择器有哪几种？
id选择器，以#命名，例如 #header ,表示名为header的id选择器。
类选择器，以.命名，例如.header,表示名为header的类选择器。
标签选择器，以html标签命名，例如p{},表示p标签的样式。
通用选择器，以*{},表示html所有的元素样式。
组合选择器：
-
伪类选择器，常见a:hover。
常见伪类元素
- 属性选择器，常见形式E[attr]，匹配属性为attr的所有E元素，权值暂为c.
*伪元素选择器：
3.选择器的优先级及复杂情况下优先级计算。
!important优先级最高，会覆盖掉所有选择器。
内联式次之，权值暂设为a。
id选择器次之，权值暂设为b。
类选择器，伪类选择器，属性选择器再次之，权值暂设为c。
标签选择器，伪元素选择器最次，权值暂设为d。
- 复杂情况下，可以通过计算其权值a+b+c+d，同位才可数学相加，比较权值大小来确定优先级。
举个例子：
#header p>.abc和 #header .abc.def
都有一个id选择器，b=1,前者有一个类选择器，c=1，后者有两个类选择器，c=2，所有，#header .abc.def的优先级高于前者。
权值相同的，后面的选择器会覆盖前面选择器的效果。
4.a:link, a:hover, a:active, a:visited 的顺序是怎样的？ 为什么？
顺序是：
a:link
a:visited
a:hover
a:active
-
为什么?
因为这四个选择器，都有一个伪类选择器，一个标签选择器，所以，权值相同，在后面的会覆盖前面的效果。
未点击状态下，显示的是a:link效果，点击过后，页面会展示a:visited的效果，点击过后，再划过会显示a:hover效果，无论什么时候点击状态下都会显示为a:active效果。这是我们期望的发生的。
假如a:visited放在a:hover之后，那么，只要点击过这个链接，鼠标滑过不会有效果，点击状态下，：active会有相应的效果。这是因为a:visited的会覆盖掉滑过的效果。假如，a:visited放在最后，那么无论你滑过鼠标，还是点击他，只会有visited的效果。因为后面的效果会覆盖前面的效果。
再假如
a:link;
a:visited;
a:active;
a:hover;
效果就是你只要鼠标划上去，无论你点击与否，都只有:hover的效果。
5.以下选择器上面意思？
\#header {} // 名字为header的id选择器
\.header {} //名字为header的类选择器
\.header .logo {} //header选择器下的所有.logo元素
\.header.mobile {} //既有header又有mobile的元素
\.header p, .header h3 {} //header选择器下的p标签的元素，和 header下的h3标签的元素
\#header .nav>li {} //名为header的id选择器下的 nav 类里面的第一代li元素。
\#header a:hover {} //名为header的id选择器下的a:hover元素
\#header .logo~p {} //名为header的id选择器下的 .logo选择器之后的相邻p元素，且不论是不是直接相邻。
\#header input[type="text"] //名为header的id选择器下的所有input且input的type属性为text的元素。
6.我所知道的伪类选择器。
- a:hover 鼠标滑过时的a标签样式
- a:visited 鼠标点击过后的a标签样式
- a:link所有未被点击的a连接。
- a:active 点击状态下a标签的样式。
- E:first-child 父元素中的第一个是E选择器的元素
- E:last-child 父元素的最后一个是E选择器的元素
- E:nth-last-child(n) 父元素的倒数第n个是且只能是E选择器的元素。
- E:nth-child(n) 父元素的第n个是且只能是E选择器的元素。
- E:first-of-type 父元素下的使用同种标签第一个有E选择器的元素。
- E:nth-last-of-type(n) 父元素下使用同种标签的有E选择器的倒数第n个元素
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.运行代码解释原因
-
原因分析：
.item1:first-child{} 选中父元素下第一个元素是.item选择器的元素。所以选择到了<p>标签的元素。.item:first-of-type{} 选中父元素下同种标签中第一个使用.item选择器的元素，所以选择到了
<p>和第一个<h3>标签。
