1.class 和 id 的使用场景?
- class用于选择同一类型的元素
- id元素具有唯一性，只匹配一个元素
2.CSS选择器常见的有几种?
-
基础选择器
- 通用元素选择器，匹配页面所有元素 （*）
- id选择器，匹配特定元素（#id）
- class选择器，匹配某一类元素（.class）
- 标签选择器
-
组合选择器
-
E,F 多元素选择器，同时匹配E或F
1.png -
E F 后代选择器，匹配E所有后代F
 -
E>F 子元素选择器，匹配E的所有直接子元素
3.png E+F 直接相邻选择器 匹配和E相邻的F
4.png- E~F 普通相邻选择器 匹配和E之后的同级的F
5.png- EF 匹配同时具有两个属性
-
6.png
- 属性选择器
E[attr] 匹配所有具有属性attr的元素
7.png
- 伪类选择器
E:link 匹配所有未被点击的链接
E:visited 匹配所有已被点击的链接
E:active 匹配鼠标已经其上按下、还没有释放的E元素
E:hover 匹配鼠标悬停其上的E元素
E:enabled 匹配表单中可用的元素
E:disabled 匹配表单中禁用的元素
E:nth-child(n) 匹配其父元素的第n个子元素，第一个编号为1
E:nth-of-type(n) 与:nth-child()作用类似，但是仅匹配使用同种标签的元素
E:first-of-type 匹配父元素下使用同种标签的第一个子元素，等同于:nth-of-type(1) - 伪元素选择器
E::before 在E元素之前插入生成的内容
E::after 在E元素之后插入生成的内容
3.选择器的优先级是怎样的?对于复杂场景如何计算优先级？
- css优先级
- 在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式
- 作为style属性写在元素标签上的内联样式
- id选择器
- 类选择器
- 伪类选择器
- 属性选择器
- 标签选择器
- 通配符选择器
- 浏览器自定义
- 复杂场景计算优先级
选择器的特殊性分为4个等级，a b c d，从左到右，越左边的越优先, 如果一个选择器规则有多个相同类型选择器，则+1。
如果是HTML行内样式，那么特殊性最优先 a；id选择器的特殊性是 b；类选择器、伪类选择器、属性选择器为 c；标签选择器、伪元素选择器为 d。!important优先级最高无视上述规则。当选择器优先级相同时，那么后定义的会覆盖先定义的
4.a:link, a:hover, a:active, a:visited 的顺序是怎样的？ 为什么？
这是个样式覆盖的问题，由于伪类选择器后面的样式会覆盖前面的，先来看 a:hover, a:active，当鼠标点击未松开时是同时触发他们俩的，所以要想都有效果， a:active要放在后面。同理.a:link和 a:visited要放在它俩前。
5.以下选择器分别是什么意思?
#header{ } ------------------------------- id选择器，匹配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:hover（鼠标在a链接悬停时样式）
#header .logo~p{ }-------------- 后代选择器，匹配id="header"下的class="logo"元素之后的同级p元素
#header input[type="text"]{ }----------------- 后代选择器，匹配id="header"下的，input标签中，属性type的值为"text"的元素
- 列出你知道的伪类选择器
E:link 匹配所有未被点击的链接
E:visited 匹配所有已被点击的链接
E:active 匹配鼠标已经其上按下、还没有释放的E元素
E:hover 匹配鼠标悬停其上的E元素
E:enabled 匹配表单中可用的元素
E:disabled 匹配表单中禁用的元素
E:nth-child(n) 匹配其父元素的第n个子元素，第一个编号为1
E:nth-of-type(n) 与:nth-child()作用类似，但是仅匹配使用同种标签的元素
E:first-of-type 匹配父元素下使用同种标签的第一个子元素，等同于:nth-of-type(1) - div :first-child和div :first-of-type的作用和区别 （注意空格的作用）
- div：first-child匹配的是其父元素的第一个子元素
- div:first-of-type匹配父元素下使用同种标签的第一个子元素
- 运行如下代码，解析下输出样式的原因
<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>
8.png
