css选择器

class 和 id 的使用场景?

id选择器，使用id="name"定义，使用#name调用来设置此id的css，其优先级高于类选择器，一个标签只能有一个id且每个id只能使用一次，常常用于建立派生选择器；
class类选择器，使用.name定义，使用class="name"调用，一个标签可以有多个类且同一个类可以用到不同的标签上，多用于多个标签样式相似或完全相同时；

---

CSS选择器常见的有几种?

通用选择器	*{}
类选择器	.class{}
id选择器	#id{}
标签选择器	element{}
伪类选择器	a:hover{}
伪元素选择器	a::before{}

---

选择器的优先级是怎样的?对于复杂场景如何计算优先级？

!important为样式设置最高权限 > 元素标签上的内联样式 > id选择器#id > 类选择器.class > 伪类选择器a:hover > 属性选择器 > 标签选择器p a h1 > 通配符选择器* > 浏览器自定义
同级选择器，后写的会覆盖之前写的样式

a:link, a:hover, a:active, a:visited 的顺序是怎样的？ 为什么？

a:link（未被点击）
a:visited（已被点击）
a:hover（鼠标悬停其上）
a:active（鼠标已经按下，还没有释放）
*visited写在active后面，当a标签被点击之后，visited的样式会覆盖其他样式，导致其他样式都不生效

---

以下选择器分别是什么意思?

#header{  id为header的选择器
}
.header{ class为header的选择器
}
.header .logo{  header类中后代名为logo的类选择器
}
.header.mobile{  类名同时含有header和mobile的选择器
}
.header p, .header h3{ header类中的后代p标签选择器 和header类中的后代h3标签选择器
}
#header .nav>li{ id为header的选择器中的后代nav类的直接子元素li标签
}
#header a:hover{id为header的选择器中的后代a在hover状态下的样式
}
#header .logo~p{  id为header的选择器中后代名为logo类之后同级的p标签
}
#header input[type="text"]{  id为header的选择器中属性为type="text"的input标签
}

---

列出你知道的伪类选择器：

---	---
E:first-child	匹配元素E的第一个子元素
E:nth-child	匹配元素E的第n个子元素
E:enabled和E:disabled	匹配元素E的状态为可用/不可用
E:checked和E:selection	匹配元素E的状态为单选框选中/复选框选中
a:link	未被点击的链接
a:visited	已被点击的链接
a:hover	鼠标悬停其上的链接
a:active	鼠标已经按下，但没有释放的链接

---

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{� 选取作为父元素第一个子元素的class为item1的元素
  color: red;
}
.item1:first-of-type{  选取作为父元素第一个出现的各类class为item1的元素，aa所在的p元素第一次出现，bb所在的h3元素第一次出现，都被选中，cc所在的h3在bb后面，因为h3标签出现过一次，所以不再被选中。
  background: blue;
}
</style>
 <div class="ct">
   <p class="item1">aa</p>
   <h3 class="item1">bb</h3>
   <h3 class="item1">ccc</h3>
 </div>

输出样式