- class 和 id 的使用场景?
class用于主区块里面的详细内容，同一个class可以重复出现，一个标签可以有几个不同的class。
id多使用于主要块级元素，id一个页面中只能出现一次，有些独一无二元素也可用id。 - CSS选择器常见的有几种?
通配符选择器（＊）
id选择器（#ID）
类选择器（.className）
元素选择器(E)
后代选择器（Ｅ Ｆ）
子元素选择器(E>F)
相邻兄弟元素选择器(E + F)
群组选择器（selector1,selector2,...,selectorN）
伪类和伪元素选择器 - 选择器的优先级是怎样的?对于复杂场景如何计算优先级？
!important：在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式
内联样式：style="..."
ID选择器
类选择器
伪类选择器
属性选择器
标签选择器
通配符选择器
浏览器自定义
对于复杂场景我们可以记住以下三条规则：
- 包含ID的选择符胜过包含类的选择符，包含类的选择符胜过包含标签名的选择符。
- 如果几个不同来源都为同一个标签的同一个属性定义了样式，那么行内样式胜过嵌入样式，嵌入样式胜过链接样式。在链接的样式表中，具有相同特指度的样式，后生命的胜过先声明的。
- 设定的样式胜过继承的样式，此时不用考虑特指度（即显式设定优先）。
a:link, a:hover, a:active, a:visited 的顺序是怎样的？ 为什么？
顺序是link hover active visited
鼠标经过的“未访问链接”同时拥有a:link、a:hover两种属性，后面的属性会覆盖前面的属性定义；
鼠标经过的“已访问链接”同时拥有a:visited、a:hover两种属性，后面的属性会覆盖前面的属性定义；
所以说，a:hover定义一定要放在a:link、a:visited的后面,以下选择器是什么意思？
- #header{
}
选中id="header"的元素 - .header{
}
选中class="header"的元素 - .header .logo{
}
选中class属性为header的父元素的拥有class为logo的子元素 - .header.mobile{
}
匹配类名包含header和mobile的元素，如class = 'beader mobile' - .header p, .header h3{
}
匹配有header类型父元素的P元素和有header类型父元素的h3元素 - #header .nav>li{
}
匹配id为header的后代中，类名为nav的直接子元素中的li标签、、- - #header a:hover{
}
匹配id为header的后代中处在hover状态下的a标签 - #header .logo~p{
}
匹配id为header的后代中类名为logo的元素的一般相邻同胞元素P - #header input[type="text"]{
}
匹配id为header的后代中属性值type=text的input元素
列出你知道的伪类选择器
a:link 向未被访问的链接添加样式
a:visited 向已被访问的链接添加样式
a:hover 当鼠标悬浮在元素上方时，向元素添加样式
a:active 向被激活的元素添加样式
E:first-child：匹配元素E的第一个子元素
E:nth-child：匹配元素E的第n个子元素
E:enabled和E:disabled：匹配元素E的状态为可用/不可用
E:checked和E:selection：匹配元素E的状态为单选框选中/复选框选中-
div:first-child、div:first-of-type、div :first-child和div :first-of-type的作用和区别 （注意空格的作用）
div:first-child 匹配某个父元素的第一个子元素，且类型为div
div:first-of-type 匹配某个父元素第一个div类型子元素
div :first-child 所匹配的元素，其父元素为div，该元素为div的第一个子元素
div :first-of-type： 所匹配的元素，其父元素为div，该元素为div的子元素中某一类元素的第一个元素
8.运行如下代码，解析下输出样式的原因。
image.png
.item1:first-child 选中的是class 为item1的是某个父元素的第一个子元素的标签，在代码中就是<p>，因为p标签是div的第一个子元素。
.item2:first-of-type 选中的是class 为item1的且是某个父元素同一种类型标签的第一个，那么p 和第一个h3标签都符合这一条，所以北京都成为蓝色。
