1、class 和 id 的使用场景?
class是一种类型可以被多个不同种类的标签同时应用它所包含的属性，id是唯一的只能代表一个标签的特性
2、CSS选择器常见的有几种?
- 基础选择器
1、通配符选择器 " * "
2、class 类选择器 " . "
3、id选择器 " # "
4、标签选择器 - 属性选择器
E[attr]：筛选出所有具有属性名为attr的属性的元素
E[attr=value]：筛选出所有属性attr的值为vlaue的元素 - 组合选择器
多元素选择器：以','分隔，表示同时匹配多个选择器对应的元素
后代选择器：以空格分隔 - 伪类选择器
E:first-child：父元素的各类标签中第一个子元素且必须符合指定类型（为E）
E:nth-child：匹配其父元素的第n个子元素
E:enabled和E:disabled
E:checked和E:selection
E:link：未被访问时的样式
E:visited：已经被访问后的样式
E:hover：鼠标悬停在a链接之上的样式
E:active：鼠标按下但未释放时的样式 - 伪元素选择器
E:before：在E元素之前插入的内容
E:after：在E元素之后插入的内容
3、选择器的优先级是怎样的?对于复杂场景如何计算优先级？
1、!important：在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式
2、内联样式：style="..."
3、ID选择器
4、类选择器
5、伪类选择器
6、属性选择器
7、标签选择器
8、通配符选择器
9、浏览器自定义
对于复杂的先按照以上顺序赋予ABCD...等级然后比较各等级的包含的个数，从高级往低级别的比较
4、a:link, a:hover, a:active, a:visited 的顺序是怎样的？ 为什么？
正确的顺序为
a:link、a:visited、a:hover、a:active (其中，link和visited可以互换)
1.鼠标经过的“未访问链接”同时拥有a:link、a:hover两种属性，后面的属性会覆盖前面的属性定义；
2.鼠标经过的“已访问链接”同时拥有a:visited、a:hover两种属性，后面的属性会覆盖前面的属性定义；
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标签的hover效果的属性 __
#header .logo~p{ }__id为header中 class为logo的所有的p标签 __
#header input[type="text"]{ }__id为header中type为text的所有的input标签 __
列出你知道的伪类选择器
E:first-child 匹配元素E的第一个子元素
E:link 匹配所有未被点击的链接
E:visited 匹配所有已被点击的链接
E:active 匹配鼠标已经其上按下、还没有释放的E元素
E:hover 匹配鼠标悬停其上的E元素
E:enabled 匹配表单中可用的元素
E:disabled 匹配表单中禁用的元素
E:checked 匹配表单中被选中的radio或checkbox元素
E::selection 匹配用户当前选中的元素
E:nth-child(n) 匹配其父元素的第n个子元素，第一个编号为1
E:nth-last-child(n) 匹配其父元素的倒数第n个子元素，第一个编号为1
E:nth-of-type(n) 匹配使用同种标签的元素中父元素的第n个子元素
E:nth-last-of-type(n) 匹配使用同种标签的元素父元素的倒数第n个子元素
E:last-child 匹配父元素的最后一个子元素，等同于:nth-last-child(1)
E:first-of-type 匹配父元素下使用同种标签的第一个子元素，等同于:nth-of-type(1)
E:last-of-type 匹配父元素下使用同种标签的最后一个子元素，等同于:nth-last-of-type(1)
E:only-child 匹配父元素下仅有的一个子元素，等同于:first-child:last-child或 :nth-child(1):nth-last-child(1)
E:only-of-type 匹配父元素下使用同种标签的唯一一个子元素，等同于:first-of-type:last-of-type或 :nth-of-type(1):nth-last-of-type(1)
E:not(selector) 匹配不符合当前选择器的任何元素
div:first-child是父元素的首个子元素且为div的元素，
div:first-of-type：选择属于其父元素的子元素中首类型且为 div元素。
