class和id的使用场景
class指定标签的类名，属性值可出现在多个标签中。
id指定标签的唯一标识，为某一元素提供特有的一个id，类似于身份证号
CSS选择器常见的有几种?
- 基础选择器
- 通用选择器（*）
- 标签选择器（e.g.
p{}） - id选择器(e.g.
#footer{}) - class选择器(e.g.
.header{})
- 组合选择器
- E,F（多元素选择器，之间用","隔开）
- E F (后代选择器，用空格隔开，注意与子元素选择器区别)
- E>F(子元素选择器，用">"隔开)
- E+F(直接相邻选择器，用"+"隔开)
- E~F(普通相邻选择器，匹配E元素之后的同级元素F)
- .class1.class2(id和class选择器和选择器连写的时候中间没有分隔符，. 和 # 本身充当分隔符的元素)
- element#id(id和class选择器和选择器连写的时候中间没有分隔符，. 和 # 本身充当分隔符的元素)
- 属性选择器
-
E[attr](匹配所有具有属性attr的元素，div[id]就能取到所有有id属性的div) -
E[attr = value](匹配属性attr值为value的元素，div[id=test],匹配id=test的div)
- 伪类选择器
- E:first-child(匹配元素E的第一个子元素)
- E:link(匹配所有未被点击的链接)
- E:visited(匹配所有已被点击的链接)
- E:active(匹配鼠标已经其上按下、还没有释放的E元素)
- E:hover(匹配鼠标悬停其上的E元素)
- E:focus(匹配获得当前焦点的E元素)
- E:nth-child(n)(匹配其父元素的第n个子元素)
- E:nth-of-type(n)(仅匹配使用同种标签的元素)
- E:first-of-type（匹配父元素下使用同种标签的第一个子元素，等同于:nth-of-type(1)）
- 伪元素选择器
- E::first-line 匹配E元素内容的第一行
- E::first-letter 匹配E元素内容的第一个字母
- E::before 在E元素之前插入生成的内容
- E::after 在E元素之后插入生成的内容
选择器的优先级是怎样的?对于复杂场景如何计算优先级？
- 从高到低分别是
在属性后面加@important > style内联 > id > class > 伪类 > 属性 > 标签 > 通配符 > 浏览器默认 - 复杂场景计算
- 行内样式 <div style="xxx"></div> ==> a
- ID 选择器 ==> b
- 类，属性选择器和伪类选择器 ==> c
- 标签选择器、伪元素 ==> d
- 注：如果两个选择器权重一样，则按浏览器解析顺序从上至下，下面覆盖上面
a:link, a:hover, a:active, a:visited 的顺序是怎样的？ 为什么？
顺序为a:link, a:visited, a:hover, a:active
原因：
- 鼠标经过的“未访问链接”可应用a:link、a:hover、a:active 这三种伪类选择器来定义样式，因为后面的样式会覆盖前面的样式，所以a:hover应放在a:link的后面，a:active放在最后。
- 鼠标经过的“已访问链接”可应用a:visited、a:hover、a:active这三种类选择器来定义样式，因为后面的样式会覆盖前面的样式，所以a:hover应放在a:hovor的后面，a:active放在最后。
以下选择器分别是什么意思?
#header{}id选择器，id为header的元素.header{}class选择器，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父元素的后代input标签属性type值为text的元素
列出你知道的伪类选择器
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::selection 匹配用户当前选中的元素
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) 匹配不符合当前选择器的任何元素
div:first-child和div:first-of-type的作用和区别
div:first-child：指div父元素的第1个子元素(第一个子元素必须为div，若不是则无法选中)
div:first-of-type：匹配父元素下使用同种标签的第一个子元素，等同于:nth-of-type(1)
运行如下代码，解析下输出样式的原因。
<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标签的div父元素第一个子元素p，所以p元素内容aa颜色变为红色
第二个：`.item1:first-of-type{background: blue;}`class为item1其父元素下同种标签的第一个子元素！这里p标签只有一个即其背景颜色变蓝色。有两个h3标签，其第一个标签内容为bb，所以bb背景色变为蓝色