class 和 id 的使用场景?
- 每个标签只能设置一个id，此id在页面中只能出现一次。id多用于页面分块时块级标签。
- 每个标签可以设置多个class，此class可以设置给其他标签。class多用于相同样式的一组标签。
- id的优先级高于class。
CSS选择器常见的有几种?
- 基础选择器：通配符选择器(*)，标签选择器(element)，id选择器(#id)，class选择器(.class)。
- 组合选择器：多元素选择器(E,F)，后代选择器(E F)，子元素选择器(E>F)，直接相邻元素选择器(E+F)，普通相邻元素选择器(E~F)，交集选择器 (EF)。
- 属性选择器 : E(attr)，E(attr=value)，E(attr^=value)，E(attr$=value)，E(attr*=value)，E(attr~=value)。
- 伪类选择器 ： E:first-child匹配作为长子（第一个子女）的元素E，E:link匹配所有未被点击的链接，E:visited 匹配所有已被点击的链接，E:active 匹配鼠标已经其上按下、还没有释放的E元素，E:hover 匹配鼠标悬停其上的E元素，E:focus 匹配获得当前焦点的E元素，E:lang(c) 匹配lang属性等于c的E元素，E:enabled 匹配表单中可用的元素，E:disabled 匹配表单中禁用的元素，E:checked 匹配表单中被选中的radio或checkbox元素， E:root 匹配文档的根元素，对于HTML文档，就是HTML元素，E:nth-child(n) 匹配其父元素的第n个子元素，第一个编号为1，E:nth-last-child(n) 匹配其父元素的倒数第n个子元素，第一个编号为1，E:nth-of-type(n) 与:nth-child()作用类似，但是仅匹配使用同种标签的元素，E:nth-last-of-type(n) 与:nth-last-child() 作用类似，但是仅匹配使用同种标签的元素，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:empty 匹配一个不包含任何子元素的元素，文本节点也被看作子元素，E:not(selector) 匹配不符合当前选择器的任何元素，E::first-line 匹配E元素内容的第一行，E::first-letter 匹配E元素内容的第一个字母，E::before 在E元素之前插入生成的内容，E::after 在E元素之后插入生成的内容。
选择器的优先级是怎样的?对于复杂场景如何计算优先级？
- 选择器优先级顺序：
在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式
作为style属性写在元素标签上的内联样式
id选择器
类选择器
伪类选择器
属性选择器
标签选择器
通配符选择器
浏览器自定义
- 复杂场景下将选择器分为四个级别通过各级别的出现次数决定。
四个级别分别为：行内选择符、ID选择符、类别选择符、元素选择符。
优先级的算法：
每个规则对应一个初始"四位数"：0、0、0、0
若是 行内选择符，则加1、0、0、0
若是 ID选择符，则加0、1、0、0
若是 类选择符/属性选择符/伪类选择符，则分别加0、0、1、0
若是 元素选择符/伪元素选择符，则分别加0、0、0、1
算法：将每条规则中，选择符对应的数相加后得到的“四位数”，从左到右进行比较，大的优先级更高。 优先
级相同时，采用就近原则，即最后出现的样式。
a:link, a:hover, a:active, a:visited 的顺序是怎样的？ 为什么？
- link visited hover active，当鼠标放上去的时候hover生效 根据优先级进行变色。当我按住的时候hover active生效 根据优先级变色 ,当我 移除的 visited 永久生效 ，如此顺序符合逻辑 ，否则样式被覆盖了
以下选择器分别是什么意思?
#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的元素的后代元素中clss为nal的子元素li */
}
#header a:hover{ /* id为header的元素的后代元素中处于hover状态的a元素 */
}
#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:focus 匹配获得当前焦点的E元素，E:lang(c) 匹配lang属性等于c的E元素，E:enabled 匹配表单中可用的元素，E:disabled 匹配表单中禁用的元素，E:checked 匹配表单中被选中的radio或checkbox元素， E:root 匹配文档的根元素，对于HTML文档，就是HTML元素，E:nth-child(n) 匹配其父元素的第n个子元素，第一个编号为1，E:nth-last-child(n) 匹配其父元素的倒数第n个子元素，第一个编号为1，E:nth-of-type(n) 与:nth-child()作用类似，但是仅匹配使用同种标签的元素，E:nth-last-of-type(n) 与:nth-last-child() 作用类似，但是仅匹配使用同种标签的元素，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)。
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 :first-of-type ： 选择div的后代元素中有相同类型的元素中第一个元素。
运行如下代码，解析下输出样式的原因。
<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选择的是class为item1的父元素div的第一个子元素aa，所以aa的字体颜色是红色。
- .item1:first-of-type选择的是class为item1的父元素div的子元素中具有相同标签的第一个元素，有第一个p标签a和第一个h3标签bb，所以他们的背景颜色是蓝色。
