一：class和id的使用场景
class：在css里面用.classname调用，不同的标签可以使用相同的classname，然后用一个classname对其同时添加样式。
id：优先级高于class，在css里用#idname调用，一个idname只能用于一个标签。
二：CSS选择器常见的有几种?
1.id选择器
2.类选择器
3.标签选择器
4.后代选择器（标签1（可以用id或class代替） 标签2）
5.子元素选择器（标签1>标签2（可以用id或class代替））
6.多元素选择器：以','分隔，表示同时匹配多个选择器对应的元素
7.通配符选择器
8.属性选择器：E[attr]：筛选出所有具有属性名为attr的属性的元素
E[attr=value]：筛选出所有属性attr的值为vlaue的元素
9.伪类选择器：E:link：未被访问时的样式
E:visited：已经被访问后的样式
E:hover：鼠标悬停在a链接之上的样式
E:active：鼠标按下但未释放时的样式
E:nth-child（n）：匹配其父元素的第n个子元素
10.伪元素选择器：E：before：在E元素之前添加
E：after：在E元素之后添加
三.选择器的优先级是怎样的?对于复杂场景如何计算优先级？
1.!important：在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式
2.内联样式：style="..."
3.ID选择器
4.类选择器
5.伪类选择器
6.属性选择器
7.标签选择器
8.通配符选择器
9.浏览器自定义
对于复杂场景，计算优先级时通过数标签来计算，先数id，如果id相等再数类，如果id不相等，id多的选择器权重高，权重越高，优先级越高。如果id选择器数量相同，再数类选择器，最后数标签。同时，相同级别的选择器后写的会覆盖前面写的。
四.a:link, a:hover, a:active, a:visited 的顺序是怎样的？ 为什么？
a:link、a:visited、a:hover、a:active
1.鼠标经过的“未访问链接”同时拥有a:link、a:hover两种属性，后面的属性会覆盖前面的属性定义；
2.鼠标经过的“已访问链接”同时拥有a:visited、a:hover两种属性，后面的属性会覆盖前面的属性定义；
所以说，a:hover定义一定要放在a:link、a:visited的后面,
五.以下选择器分别是什么意思?
#header{}:匹配id名为header的的元素
.header{}：匹配class为header的元素
.header .logo{}：匹配类为header元素的后代元素中类为logo的元素
.header.mobile{}： class同时包含header和mobile的元素
.header p, .header h3{}：类为header元素后代中的p元素和h3元素
#header .nav>li{}：匹配id为header元素的后代中类为nav的元素
#header a:hover{}：给id为header的元素的后代中的a元素添加鼠标经过时的样式
#header .logo~p{}：匹配id为header的后代中，类名为logo的元素之后的同级元素中，的p标签
#header input[type="text"]{}：匹配id为header的元素的后代中type属性为text的input元素。
六.列出你知道的伪类选择器
E:link：未被访问时的样式
E:visited：已经被访问后的样式
E:hover：鼠标悬停在a链接之上的样式
E:active：鼠标按下但未释放时的样式
E:nth-child（n）：匹配其父元素的第n个子元素
E:enabled和E:disabled：匹配元素E的状态为可用/不可用
E:checked和E:selection：匹配元素E的状态为单选框选中/复选框选中
七.div:first-child和div:first-of-type的作用和区别
first-child 匹配其父元素的第一个子元素（可能匹配不同标签，同时无效果）
first-of-type 匹配其父元素下拥有相同标签的第一个元素（匹配的一定是相同类型的div标签）
例：
<body>
<span>title</span>
<div>div1</div>
<div>div2</div>
</body>
1.div:first-child指定必须是第一个元素的div标签，所以无效果
2.div:first-of-type指定第一个div标签，所以是指div1所在的div标签样式
八。运行如下代码，解析下输出样式的原因。
item1:first-child{ color: red;}
指定父元素中第一个类名为item1的元素的字体颜色为红色
.item1:first-of-type{ background: blue;}
父元素中每一类元素的第一个类名为item1的元素的背景色为蓝色，
网友评论