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.运行代码解释原因

demo

• 原因分析：
  .item1:first-child{} 选中父元素下第一个元素是.item选择器的元素。所以选择到了<p>标签的元素。

  .item:first-of-type{} 选中父元素下同种标签中第一个使用.item选择器的元素，所以选择到了<p>和第一个<h3>标签。