1、class 和 id 的使用场景?

1. class 重在样式的复用，重普遍性。
2. id重在划分样式区域，可以作为样式表中的命名空间来管理样式。
3. id也可以指定某一个特殊元素的样式，重特殊性。
4. id选择器是不支持空格分隔的id列表的，不像class
5. 大小写敏感

注意：在html中声明多个一样的ID的元素，在css中该ID的样式，这些元素则都会生效。而在javascript中用DOM选择器只会选到第一个元素。

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

1. 通用符号选择器

* {
    color:red;    //整个页面所以元素颜色均为红色
}

2. 标签元素选择器：直接写标签名element

div{}
p{}

3. 类选择器 与 id选择器

.classname{}    
    *.class{}    //可以忽略通配符号*
    .foo.error{}    //复合类选择器
#id
    *#id{}    //可以忽略通配符号*

4. 属性选择器

[attr]    //包含attr属性的元素
p[attr1][attr2]    //包含attr1和attr2属性的p元素
p[attr=1]    //包含attr属性，并且值为1的p标签元素
[attr~="abc"]    //只需attr有包含abc即可被选取。部分属性值选择器，可用于任何属性上而不是只在class上
[foo^="bar"]    //选择foo属性以bar开头的所有元素
[foo$="bar"]    //选择foo属性以bar结尾的所有元素
[foo*="bar"]    //选择foo属性中包含bar的所有元素
[foo | ="bar"]    //选择foo属性中等于bar或者以bar-开头的所有元素

5. 后代选择器

h1 em{}    //选择h1的后代em
h1>em{}    //选择h1的儿子em
a+b    //相邻兄弟选择器，选择a与b相邻的b元素

6. 伪类选择器、伪元素选择器

以下选择器优先级相同，考虑他们会相互覆盖，建议按照这个顺序：

链接伪类\动态伪类
a:link    //匹配所有未被点击的链接
a:visited    //匹配所有已被点击的链接(css只能为其设置颜色，为了不泄露用户点击过网站的隐私)
a:focus    //匹配获得当前焦点的E元素
a:hover    //鼠标悬停其上的a元素
a:active    //匹配鼠标已经其上按下、还没有释放的元素

ps：记这顺序有个小招数，“LoVe？ HA!”
pps：LV HA，买了个LV包包，边走边笑HA

位置伪类
a:first-child    //匹配元素a的第一个子元素
a:last-child    //匹配元素a的最后一个子元素
a:nth-child(1)
a:nth-last-child(1)    //odd(奇数)/even(偶数)

:first-letter    //选择一段文本的第一个字母
:first-line    //选择一段文本的第一行文本

a::before
a::after     //匹配a元素之前插入生成的内容

E:lang(c)       //匹配lang属性等于c的E元素
E:enabled    //匹配表单中可用的元素
E:disabled    //匹配表单中禁用的元素
E:checked    //匹配表单中被选中的radio或checkbox元素
E::selection    //匹配用户当前选中的元素

:not(p.a#b)    //选择器取反

Odd 和 even 是可用于匹配下标是奇数或偶数的子元素的关键词（第一个子元素的下标是 1）。

如下代码，0dd为奇数 tr元素指定红色，even为偶数 tr元素指定黄色背景色：

tr:nth-child(even){
    background: yellow;
}
tr:nth-child(Odd){
    background: red;
}

odd even

3、选择器的优先级

从高到低排序

1. 在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式
2. 作为style属性写在元素标签上的内联样式
3. id选择器#id
4. 类选择器.class
5. 伪类选择器a:hover
6. 属性选择器[title="foo"]
7. 标签选择器p a h1
8. 通配符选择器*
9. 浏览器自定义

复杂场景

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

比如
<p style="color: green;">    //1,0,0,0
#id{color:red}    //0,1,0,0
h2.grape{color:red}    //0,0,1,1
h1{color:red}    //0,0,0,1

使用ID选择器和属性选择器 选择同一个元素区别在于ID选择器的优先级更高
h1#page-title    //0,1,0,1    winner!   
h1[id="page-title"]    //0,0,1,1 

ps:四位的无穷进制数；通配符和连接符如 > + ~ 等特殊性为0不参与优先级的计算；继承无特殊性

4、什么是 CSS 继承? 哪些属性能继承，哪些不能？

CSS 继承：子元素没有指定值的情况继承父元素的属性。

所有元素可继承：visibility和cursor
内联元素可继承：letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction
终端块状元素可继承：text-indent和text-align
列表元素可继承：list-style、list-style-type、list-style-position、list-style-image。
表格元素可继承：border-collapse

不可继承的：display、margin、border、padding、background、height、min-height、max-height、width、min-width、max-width、overflow、position、left、right、top、bottom、z-index、float、clear、table-layout、vertical-align、page-break-after、page-bread-before和unicode-bidi

总结：一般一些字体呀，文本呀，颜色等的设置都是可继承属性；非继承属性大部分都是一些和定位呀，浮动呀，盒子模型呀等有关

关于继承无特殊性

继承没有特殊性

因为通配符适用所有元素，而且有0特殊性，而继承值根本没有特殊性，因此<em>显示的颜色为红色

声明权重排序

1. 读者的重要声明
2. 作者的重要声明
3. 作者的普通声明
4. 读者的普通声明
5. 用户代理声明

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

6、div:first-child与div:first-of-type的作用和区别?

1、div:first-child 匹配父元素下，作为第一个子元素的div元素
2、div:first-of-type 匹配父元素的子元素中，第一个div元素

div:first-child 和 div:first-of-type 区别
.item1:first-child 匹配class名为item1的第一个元素为红色
.item1:first-of-type 匹配class名为item1不同类型元素的第一个，比如第一个<p>标签，第一个<h3>背景样式为蓝色

7、div :first-child与div :first-of-type的的作用和区别(注意空格的作用)?

1、div :first-child 匹配所有div元素内所有元素中属于其父元素的首个子元素
2、div :first-of-type 匹配所有div元素内所有元素中属于其父元素的首个类型的子元素

css选择器32关小游戏
牢记31种CSS选择器用法