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的元素了，所以不生效
