class 和 id 的使用场景?
- class用于指定元素属于哪一种样式的类
- id属性用于定义一个元素的独特的样式
class是一个样式，先定义好， 然后可以套给多个结构/内容, 便于复用。也就是说class名称可以相同。
id是一个标签，用于区分不同的结构和内容，就象你的名字， 如果一个屋子有2个人同名，就会出现混淆；id是先找到结构/内容，再给它定义样式；
传送门
CSS选择器常见的有几种?
- 基础选择器
- 通用选择器
- id选择器
- 类选择器
- 标签选择器
- 组合选择器
- 多元素选择器
- 后代选择器
- 子元素选择器
- 直接相邻选择器
- 普通相邻选择器
- .class1.class2（没用分隔符时，
.和#可作为分隔符元素） - element#id（没用分隔符时，
.和#可作为分隔符元素）
- 属性选择器
- E[attr] 匹配所有具有属性attr的元素，div[id]就能取到所有有id属性的div
- 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::selection 匹配用户当前选中的元素（两个冒号是CSS3写法，一个是CSS2写法）
- 伪元素选择器
- 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) 匹配不符合当前选择器的任何元素
选择器的优先级是怎样的?
一般顺序为：!important>内联样式>类选择器>伪类选择器>属性选择器>标签选择器>通配符选择器>浏览器自定义
对于复杂场景如何计算优先级？
首先，当有!important出现时，无论是什么样式优先级最高。其次再算每个复杂选择器里出现了多少个子选择器，并且给子选择器分类，再按照上方的优先级去做顺序排列，举例：
- 当两个复杂选择器中，第一个中有1个id选择器1个类选择器，第二个有1个类选择器1个标签选择器，那么第一个优先级最高
- 当两个复杂选择器中，第一个有1个类选择器，第二有2个类选择器，那么d优先级第二个优先级最高
- 当两个复杂选择器一样，那么哪个写在最后谁优先级最高
a:link, a:hover, a:active, a:visited 的顺序是怎样的？ 为什么？
:link选择器对指向未被访问页面的链接设置样式
:hover选择器用于设置鼠标指针浮动到链接上时的样式
:active选择器用于选择活动链接。当在点击一个链接时，它就会成为活动的（激活的）
:visited选择器 用于设置指向已访问页面的链接
原因：
- 同级选择器，排在最下面的会覆盖上面的选择器
- 未访问链接时，a:link会显示出来，当鼠标浮动在链接上时想要a:hover显示出来，a:hover应该排在a:link下面
- 当访问过链接后，想要鼠标浮动在链接上时a:hover效果也会显示，a:hover也应该在a:visited下面
- 当点击链接时a:active效果会显示，并且无论是访问过或未访问过的链接，点击时都要显示a:active的效果，因此a:active优先级最高
综上所述，优先级顺序应该为：a:link>a:visited>a:hover>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元素
#header .logo~p{}d值为header元素后代中class值为logo元素之后的同级p元素
#header input[type="text"]{}d值为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::selection | 匹配用户当前选中的元素 |
div:first-child和div:first-of-type的作用和区别
- div:first-child 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 选择的是item1下的第一个子元素aa字体为红色
- .item1:first-of-type 选择是item1下的子元素中同一标签下的第一个元素，因此选择了aa和bb背景为蓝色
输出结果如下
输出结果
