class 和 id 的使用场景?
答：class用于选择一类型的元素，具有可复用性，即有class相同属性值的元素都被选中。id用于选择唯一id值的元素，一个页面一个id值只能出现一次，一般用于特定类型的不会再出现的元素上。
CSS选择器常见的有几种?
答：1.基本选择器：
通配符选择器：*
元素选择器：Element
id选择器：#id
类选择器：.class
2.组合选择器：
多元素选择器：E,F
后代选择器：E F E元素下的F元素，包含所有后代
子代选择器：E>F E元素下的直接子元素F
直接相邻选择器：E+F
普通相邻选择器：E~F
3. 属性选择器：[attr]（表示带有以 attr 命名的属性的元素），[attr=value]，[attr~=value]，[attr|=value]，[attr^=value]，[attr$=value]，[attr*=value]

4.伪类选择器：根据用途分类的伪类选择器总结为：
1)，状态：E:link,E:visited,E:active,E:focus,E:hover
2)，结构化：E:not,E:first-child,E:last-child,E:first-of-type,E:last-of-type,E:nth-type,E:nth-last-child E:nth-of-type,E:nth-last-type,E:only-child,E:only-of-type,E:target
3)，表单相关：checked，default，disabled，empty，enabled，in-range。
5.伪元素选择器：::before, ::after, ::first-letter, ::first-line, selection。
选择器的优先级是怎样的?对于复杂场景如何计算优先级？
答：!important>内联样式>id>class>伪类>属性>标签>通配符>浏览器默认。对于复杂场景，将内联样式权重定义为a，id定义为b，class，伪类和属性定位为c，伪元素，标签定义为d，先比较a的大小，相同则继续比较后面的值。
a:link, a:hover, a:active, a:visited 的顺序是怎样的？ 为什么？
答：a:link, a:visited, a:hover, a:active, a:link为永久生效，故应放在hover和active前面，这样active和hover生效时可以覆盖link。同理鼠标放在链接上hover生效，按下不松开，active生效，故active在hover后面，能覆盖hover。点击链接后，visited永久生效，故hover和active应在visited后面，鼠标再次放在链接上时，样式能覆盖visited。
以下选择器分别是什么意思?
答：header{}：选中id为header的元素
.header{}：选中class为header的所有元素
.header .logo{}：选中class为header的元素下class为logo的所有后代元素
.header.mobile{}：选中同时拥有class属性为header和logo值的元素
.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的元素下的input标签中type为text的元素。

列出你知道的伪类选择器
答：E:link,E:visited,E:active,E:focus,E:hover,E:not,E:first-child,E:last-child,E:first-of-type,E:last-of-type,E:nth-type,E:nth-last-child E:nth-of-type,E:nth-last-type,E:only-child,E:only-of-type,E:target,checked，default，disabled，empty，enabled，in-range
div:first-child和div:first-of-type的作用和区别?
答：div:first-child：匹配父元素的第一个子元素，div:first-of-type：匹配其父元素的第一个特定类型的第一个子元素，可以匹配好几个，如第一个li元素和第一个span元素。
运行如下代码，解析下输出样式的原因。
<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;}选中的是class为item1的元素的父元素的第一个子元素，即 <p class="item1">aa</p>元素，字体样式为红色。.item1:first-of-type{ background: blue;}选中的是class为item1的元素的父元素的第一个特定类似的子元素，即第一个p标签元素和第一个h3标签元素，背景设置为蓝色。