1.class 和 id 的使用场景?
- class在一个html标签中可以有很多个相同的class,但是id的话一个HTML标签只能有相同的一个。
2.CSS选择器常见的有几种?
1.基础选择器
2.组合选择器
3.属性选择器
4.伪类选择器
5.伪元素选择器
3.选择器的优先级是怎样的?对于复杂场景如何计算优先级？
- 优先级从高到低分别是：
1.在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式
2.作为style属性写在元素标签上的内联样式
3.id选择器
4.类选择器
5.伪类选择器
6.属性选择器
7.标签选择器
8.通配符选择器
9.浏览器自定义
复杂场景计算，行内样式 <div style="xxx"></div>为a类;ID 选择器为b类;类，属性选择器和伪类选择器为c类;标签选择器、伪元素为d类，复杂场景之中会从a类数量开始比较，若相同则会顺延到b类继续比较，以此类推，若是都相同则是后覆盖前。
4.a:link, a:hover, a:active, a:visited 的顺序是怎样的？ 为什么？
- 顺序为a:link ->a:visited -> a:hover -> a:active,这是一个样式覆盖的问题,一个标签，首先他是未被选中的（a:link），然后鼠标才会悬浮在它上面（a:hover），然后才会被点击（a:active），然后他的状态才会变成未选中之后（ a:visited）。而只要元素被点击之后，visited会是永久生效的，而这时如果visited放在最后，他会覆盖掉前面的属性。
5.以下选择器分别是什么意思?
#header{
} ------ 选择id为header的元素
.header{
} ------ 选择class为header的元素
.header .logo{
} ------ 选择class为header的元素后代中class为logo的元素
.header.mobile{
} ------ 选择class为header的元素和class为mobile的元素
.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的元素后代中type属性为text的input元素
6.列出你知道的伪类选择器
| 选择器 | 含义 |
|---|---|
| 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 | 匹配用户当前选中的元素 |
7.div:first-child、div:first-of-type、div :first-child和div :first-of-type的作用和区别 （注意空格的作用）
- div:first-child:匹配父元素下的第一个元素，但元素必须是div。
- div:first-of-type:匹配父元素下的第一个div标签。
上面两个的不同点在于，第一个选择器他选择的div必须是父元素的第一个子元素，第二个则不同，只要是父元素下的第一个div子元素便可。 - div :first-child:匹配div标签后代中所有父元素的第一个子元素。
- div :first-of-type:匹配div标签后代中同类型第一个子元素。
上面两个的不同点在于，第一个选择器选择的必须是第一个子元素，所以同级元素中只会被选择一个，但是第二个选择器选择的是同类型的第一个子元素，同级元素中可以有多个。
8.运行如下代码，解析下输出样式的原因。
<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>
输出的样式为
image.png
- 原因是因为:.item1:first-child选则的是作为第一个父元素的子元素且class名是item1的元素，所以只有aa变成红色，而.item1:first-of-type选择的是class名为item1且是父元素下同类型的第一个子元素，aa是其父元素下第一个p标签，而bb是其父元素下第一个h3标签，都会被选中
