class 和 id 的使用场景?

1. 在CSS文件里书写时，ID加前缀"#"；CLASS用"."
2. id一个页面只可以使用一次；class可以多次引用。
3. ID是一个标签，用于区分不同的结构和内容，就象名字，如果一个屋子有2个人同名，就会出现混淆；class是一个样式，可以套在任何结构和内容上，就象一件衣服；
4. 从概念上说就是不一样的：id是先找到结构/内容，再给它定义样式；class是先定义好一种样式，再套给多个结构/内容。

目前的浏览器还都允许用多个相同ID，一般情况下也能正常显示，不过当你需要用JavaScript通过id来控制div时就会出现错误。

CSS选择器常见的有几种?

基础选择器

组合选择器

属性选择器

伪类选择器

伪元素选择器

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

从高到低分别是

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

复杂场景如何计算优先级

行内样式 <div style="xxx"></div> ==> a
ID选择器 ==> b
类，属性选择器和伪类选择器 ==> c
标签选择器、伪元素 ==> d

小测试

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

“爱恨原则”（LoVe/HAte），即四种伪类的首字母:LVHA。
正确的顺序：a:link、a:visited、a:hover、a:active

• a:link，定义正常链接的样式；
• a:visited，定义已访问过链接的样式；
• a:hover，定义鼠标悬浮在链接上时的样式；
• a:active，定义鼠标点击链接时的样式。

为了符合浏览器解释CSS遵循的"就近原则"。我们在定义CSS中，宜将最一般的条件放在最上面，并依次向下，最下面放最特殊的。

在W3C规范中，也规定了链接的声明顺序：
在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。
在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。

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

#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{
}
//选择"di=header"下"class=nav"元素下的直接子元素 li
-----------------------------
#header a:hover{
}
// 选择"id=header"元素下的a标签，鼠标经过时的效果
-----------------------
#header .logo~p{
}
//选择"id=header"下的"class=logo"的所有同级p元素(不包括.logo)
---------------------------------------
#header input[type="text"]{
}
//选择"id=header"下的 input

列出你知道的伪类选择器

a:link，定义正常链接的样式；
a:visited，定义已访问过链接的样式；
a:hover，定义鼠标悬浮在链接上时的样式；
a:active，定义鼠标点击链接时的样式。

div:first-child、div:first-of-type、div :first-child和div :first-of-type的作用和区别 （注意空格的作用）

div:first-child 匹配父元素下，第一个子元素
div:first-of-type 匹配父元素的子元素中，第一个div元素
div :first-child div作为父元素，首个子元素
div :first-of-type div元素的后代元素中首个同类型的元素

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

<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>
//输出

输出结果

.item1:first-child {color: red;} 定义item1第一个标签为红色
.item1:first-of-type {background: blue;} 定义item1不同类型的第一个标签，背景为蓝色