1.class 和 id 的使用场景?
- class用于选择同一类型的元素，id具有唯一性，一个id只能匹配一个元素
2.CSS选择器常见的有几种?
- 基础选择器
- 组合选择器
- 属性选择器
- 伪类选择器
- 伪元素选择器
3.选择器的优先级是怎样的?对于复杂场景如何计算优先级？
** 优先级从高到低依次是 **
- 1.左属性后面使用！important会覆盖页面内任何位置定义的元素样式
- 2.作为style属性写在元素标签上的内联样式
- 3.id选择器 #
- 4.类选择器 .class
- 5.伪类选择器 first-child
- 6.属性选择器 p[XXX]
- 7.标签选择器 p{}
- 8.通配符选择器 *
- 9.浏览器选择器
** 在复杂场景中优先级的计算是根据选择器的优先级确定权重，同一级选择器数量相同则比较下一级选择器的数量;通俗点就像是皇帝纳妾，先比长相气质，再比心性性格，再比文才武略，凡是贤良淑德、德才兼备者方可进身为妃。 **
4.a:link, a:hover, a:active, a:visited 的顺序是怎样的？ 为什么？
正确顺序为：
a：link
a：visited
a:hover
a:active
原因：
1.当选择器优先级别相同时，后定义的会覆盖先定义的
2.当鼠标经过未访问链接，同时有link和hover属性，由于后定义的覆盖先定义的，所以hover在后面以此类推，当鼠标经过已访问链接，同时有visited和hover属性，由于后定义的覆盖先定义的，所以hover在link和visited后面。
5.以下选择器分别是什么意思?
** 列出你知道的伪类选择器 **
E:first-child 匹配元素E的第一个子元素
E:link 匹配所有未被点击的链接
E:visited 匹配所有已被点击的链接
E:active 匹配鼠标已经其上按下、还没有释放的E元素
E:hover 匹配鼠标悬停其上的E元素
E:enabled 匹配表单中可用的元素
E:disabled 匹配表单中禁用的元素
E:checked 匹配表单中被选中的radio或checkbox元素
E::selection 匹配用户当前选中的元素
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:not(selector) 匹配不符合当前选择器的任何元素** 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的后代元素中的第一个子元素
div :first-of-type 选择div的后代元素的同种类型的第一个元素
- ** 运行如下代码，解析下输出样式的原因。**
** .item1:first-child ** 匹配class名为item1的第一个元素为红色,所以p标签aa为红色。
** .item1:first-of-type ** 匹配class名为item1不同类型元素的第一个元素背景色为蓝色，第一种类型p标签aa背景色为蓝色；第二种类型h3标签bb背景色为蓝色，而h3标签cc为第二种类型的第二个子元素所以背景色不变。
