1 class 和 id 的使用场景?

id:指定标签的唯一标识。使用#name定义（name为id名，可任意取名），使用id="name"调用，其优先级高于类选择器，一个标签只能有一个id且每个id只能使用一次.

class:指定标签的类名。用于CSS操作，把一些特定样式放到一个class类中，需要此样式的标签，可以在添加此类。可以把多个类，放在一个class属性里，但必须用空格隔开；如：class='btn btnopen'

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

常用几种选择器有：ID选择器，类选择器，元素选择器，子选择器，后代选择器，伪类选择器，属性选择器等。这些选择器的常用表示方式是：
ID选择器：#container {}
类选择器：.box{}
元素选择器：p {}
子选择器：ul > li {}
后代选择器：div p {}
伪类选择器：a:visited {}
属性选择器：input[type="text"] {}

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

选择器优先级从高到低分别是：

在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式
作为style属性写在元素标签上的内联样式
id选择器
类选择器
伪类选择器
属性选择器
标签选择器
通配符选择器
浏览器自定义

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

/*顺序是这样的*/
a:link {
  color: #000;
}
a:visited {
  color: black;
}
a:hover {
  color: yellow;
}
a:active {
  color: red;
}

a:link,a:visited,这两个标签必须放在最前面，因为当鼠标放在a标签上时，写在最后的选择器会覆盖掉之前的选择器，想实现“当鼠标移动到a标签上变换颜色”的效果，需要将a:hover置于 a:link 和 a:visited 之后

a:link,a:visited,a:hover和a:active，当鼠标点击a标签，这四个选择器拥有相同的优先级，但是被写在最后的选择器会覆盖掉之前的选择器，要想实现“当鼠标点击a标签时变换颜色”的效果，需要将a:active放在最后。

只要记住，最简单的放在最上面，最复杂的在最下面。

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

#header{ /*选择id是header的元素*/
}
.header{ /*选择class是header的元素*/
}
.header .logo{  /*选择class是header的元素下class是logo的所有元素*/
}
.header.mobile{  /*选择class值包含header和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:nth-child：匹配元素E的第n个子元素
E:enabled和E:disabled：匹配元素E的状态为可用/不可用
E:checked：匹配元素E的状态为单选框选中
E:selection：匹配用户当前选中的元素，多用于文字被鼠标拉动选中
a:link：未被点击的链接
a:visited：已被点击的链接
a:hover：鼠标悬停其上的链接
a:active：鼠标已经按下，但没有释放的链接

7.div:first-child和div:first-of-type的作用和区别？

可以参考问题8

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

<style>
.item1:first-child{
  color: red;//选择id是item1，.ct的第一个子元素，也就是p标签，所以aa的字体是红色
}
.item1:first-of-type{
  background: blue;//父元素中每一类元素的第一个类名为item1的元素的背景色为蓝色。将div中的子元素分为p、h3两类标签，每一类取第一个类名为item1的元素，背景为蓝色
}
</style>
 <div class="ct">
   <p class="item1">aa</p>
   <h3 class="item1">bb</h3>
   <h3 class="item1">ccc</h3>
 </div>

Paste_Image.png

CSS选择器