class 和 id 的使用场景?

class写专门的class通用和私有模块命名，id具有唯一性且优先级太高，用于操作唯一的元素，但是最好只作为js操作dom的挂钩，不添加样式

CSS选择器常见的有几种?

一、基本选择器
*:通用元素选择器，匹配任何元素
E:标签选择器，匹配所有使用E标签的元素
class选择器，匹配所有class属性中包含info的元素
id选择器，匹配所有id属性等于footer的元素
二、组合选择器

• E,F:多元素选择器，用,分隔，同时匹配元素E或元素F
• E F:后代元素选择器，匹配所有属于E元素后代的F元素，E和F之间用空格分隔
• E>F:子元素选择器，匹配所有E元素的子元素F
• E+F:毗邻元素选择器，匹配所有紧随E元素之后的同级元素F
• E~F:普通相邻选择器，匹配E元素之后的同级元素F(无论直接相邻与否)

三、属性选择器

• [attr]
  表示带有以 attr 命名的属性的元素。
• [attr=value]
  表示带有以 attr 命名的，且值为"value"的属性的元素。
• [attr~=value]
  表示带有以 attr 命名的属性的元素，并且该属性是一个以空格作为分隔的值列表，其中至少一个值为"value"。
• [attr|=value]
  表示带有以 attr 命名的属性的元素，属性值为“value”或是以“value-”为前缀（"-"为连字符，Unicode编码为U+002D）开头。典型的应用场景是用来来匹配语言简写代码（如zh-CN，zh-TW可以用zh作为value）。
• [attr^=value]
  表示带有以 attr 命名的，且值是以"value"开头的属性的元素。
• [attr$=value]
  表示带有以 attr 命名的，且值是以"value"结尾的属性的元素。
• [attr*=value]
  表示带有以 attr 命名的，且值包含有"value"的属性的元素。
• [attr operator value i]
  在带有属性值的属性选型选择器表达式的右括号（]括号）前添加用空格间隔开的字母i（或I）可以忽略属性值的大小写（ASCII字符范围内的字母）

四、伪类
CSS伪类是添加到选择器的关键字，指定要选择的元素的特殊状态。例如，:hover 将在用户悬停在选择器指定的元素上时应用样式。

• first-child:匹配元素E的第一个子元素
• link ：匹配素有未被点击的链接
• visited :匹配所有已经被点击的链接
• active :匹配鼠标已经在其上按下，但是还没有释放的E元素
• root :匹配文档的根元素，对于HTML文档，就是HTML元素
• nth-child(n) :匹配其父元素的第n个子元素，第一个编号为1
• nth-last-child :匹配其父元素的第n个子元素，第一个编号为1
• nth-of-type(n):与:nth-child作用类似，但是仅匹配使用同种标签的元素
• hover :匹配鼠标悬停其上的元素
• focus :匹配获得当前焦点的元素
• lang(c) :匹配lang属性等于c的元素
• enabled :匹配表单中可用的元素
• disabled :匹配表单中禁用的元素
• checked: 匹配表单中被选中的radio或checkbox元素
• selection: 匹配用户当前选中的元素
• nth-last-of-type(n) :与nth-last-child作用相似，但是仅匹配使用同种标签的元素
• first-child:匹配父元素的第一个子元素
• last-child :匹配父元素的最后一个子元素
• first-of-type :即 nth-of-type(1)
• last-of-type :即 nth-last-of-type(1)
• only-child :匹配父元素下仅有的一个子元素
• only-of-type :匹配父元素下使用同种标签的唯一一个子元素

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

!important>内联>id>class>伪类>属性>元素>通配符>自定义
复杂场景优先级计算从最高权重开始比较，相同则比较下一个权重，权重高的优先级高于权重低的
优先级首先用权重量化，从0开始，一个行内样式+1000，一个id+100，一个属性选择器/class或者伪类+10，一个元素名，或者伪元素+1

• 相同的权重：以后面出现的选择器为最后规则
• 不同的权重，权重值高则生效
• 包含更高权重选择器的一条规则拥有更高的权重
• Id选择器的权重比属性选择器高,
• 带有上下文关系的选择器比单纯的元素选择器权重要高
• 与元素“挨得近”的规则生效
• 最后定义的这条规则会覆盖上面与之冲突的规则
• 无论多少个元素组成的选择器，都没有一个class选择器权重高
• 通配符选择器也有权重，权重被认为是 0，0，0，0。比如 *， body * 被继承的css属性也带有权重，权重是0，0，0，0。

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 logo是header的子元素
• .header.mobile 并列关系，这个class有2个名字，1个是header，1个是mobile
• .header p, .header h3 并列选择header下面的2个子元素p和h3

• header .nav>li header的子元素nav的子元素li

• header a:hover id为header的元素的子元素a链接的鼠标悬停状态

• header .logo~p id为header的元素的子元素中class为logo的元素的普通相邻元素p

• header input[type="text"] id为header的元素的子元素input且type必须是text

列出你知道的伪类选择器

• first-child:匹配元素E的第一个子元素
• link ：匹配素有未被点击的链接
• visited :匹配所有已经被点击的链接
• active :匹配鼠标已经在其上按下，但是还没有释放的E元素
• root :匹配文档的根元素，对于HTML文档，就是HTML元素
• nth-child(n) :匹配其父元素的第n个子元素，第一个编号为1
• nth-last-child :匹配其父元素的第n个子元素，第一个编号为1
• nth-of-type(n):与:nth-child作用类似，但是仅匹配使用同种标签的元素
• hover :匹配鼠标悬停其上的元素
• focus :匹配获得当前焦点的元素
• lang(c) :匹配lang属性等于c的元素
• enabled :匹配表单中可用的元素
• disabled :匹配表单中禁用的元素
• checked: 匹配表单中被选中的radio或checkbox元素
• selection: 匹配用户当前选中的元素
• nth-last-of-type(n) :与nth-last-child作用相似，但是仅匹配使用同种标签的元素
• first-child:匹配父元素的第一个子元素
• last-child :匹配父元素的最后一个子元素
• first-of-type :即 nth-of-type(1)
• last-of-type :即 nth-last-of-type(1)
• only-child :匹配父元素下仅有的一个子元素
• only-of-type :匹配父元素下使用同种标签的唯一一个子元素

div:first-child、div:first-of-type、div :first-child和div :first-of-type的作用和区别 （注意空格的作用）

• div:first-child 匹配父元素的第一个子元素
• div:first-of-type 匹配父元素下有相同标签的第一个元素
• div :first-child和div :first-of-type，div后面了空格之后，变成了匹配div下面的叫:first-child、: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>

.item1:first-child{ color: red;}

• 设置父元素中第一个类名为item1的元素颜色为红色.item1:first-of-type{ background: blue;}
• item的父元素的每一个类名为item的元素背景色为蓝色，那就是aa和bb了，因为ccc是第二个类名为item1的元素了，所以不生效