CSS选择器

`1.class 和 id 的使用场景?
class为类选择器，可以用于标识同一类的多个元素，而id只能用于标识某个元素.

2.CSS选择器常见的有几种?
基础选择器
组合选择器
属性选择器
伪类选择器
伪元素选择器

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

优先级由大到小依次如下：
（1）在属性后面使用！Important会覆盖页面内任何位置定义的元素样式
（2）作为style属性写在元素标签上的内联样式
（3）ID选择器
（4）类选择器
（5）伪类选择器
（6）属性选择器
（7）标签选择器
（8）通配符选择器
（9）浏览器自定义
复杂场景的优先级计算方法：
行内样式——a
ID选择器——b
类 、属性和伪类选择器——c
标签选择器，伪元素——d
以上选择器分别设为abcd,计算以上abcd选择器在复杂场景中出现的次数，如果a最多，则优先级最高；a同等条件下，看b出现的次数，出现次数多的，优先级最高，以此类推。

4.a:link, a:hover, a:active, a:visited 的顺序是怎样的？ 为什么？
顺序是a:link,a:visited,a:hover, a:active,他们的优先级不同，不同的位置会产生覆盖，以上的顺序能够实现正常效果。

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

qqq.png

(1)#header{}匹配ID为header的所有元素
(2).header{} 匹配 class为header的所有元素
(3).header .logo{} 匹配class为header父元素下的所有class为logo的子元素
(4).header.mobile{}匹配的元素满足这样的条件，class既为header,class又 为mobile
(5).header p, .header h3{}匹配的元素分两部分，一部分是class为header 下的标签为p 的所有子元素，另一部分是class为header下的标签为h3的所有子元素
(6)#header .nav>li{}匹配id为header下的某类子元素，子元素满足的条件是：class为nav的直接子元素li
(7)#header a:hover{}匹配id为header下的 所有 伪元素为a:hover的 子元素
(8)#header .logo~p{}匹配id为header 下的某类所有子元素，子元素满足的条件是class为 logo的同级元素，同级元素class为p
(9)#header input[type=”text”]{}匹配id为header下的属性为text的input

6.列出你知道的伪类选择器
·E:root
· E:nth-child(n)
· E:nth-last-child(n)
· E:nth-of-type(n)
· E:nth-last-of-type(n)
· E:last-child
· E:first-of-type
· E:last-of-type
· E:only-child
· E:only-of-type
7.div:first-child和div:first-of-type的作用和区别
· 匹配父元素的第一个子元素
· 匹配父元素下同种类型的第一个元素

8 运行如下代码，解析下输出样式的原因

aaaa.png

运行结果：aa为红色；aa,bb背景为蓝色
分析：
.item1:first-child 的意思是匹配父元素的第一个子元素，父元素是ct，第1个子元素是aa,因此aa是红色。

.item1:first-of-type的意思是父元素下同种类型的第一个元素，父元素是ct，同类元素有两个，一个是aa，另一个是bb,所以aa,bb元素背景色是蓝色。