task7

class 和 id 的使用场景?
class 用于具有相同样式特征的一组元素上。
id 是元素的独一无二的名称。

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

选择器的优先级是怎样的?对于复杂场景如何计算优先级？
依次往下优先级降低：
！important
style内联样式
id选择器
类选择器
伪类选择器
属性选择器
标签选择器
通配符选择器
浏览器自定义

复杂场景计算方式是：
为各类元素设立优先级，按照以下规则：
行内样式-a
ID选择器-b
类、属性选择器、伪类选择器 -c
标签选择器、伪类选择器-d
首先比较a的大小，a值大的优先级高；如果a值相等，再比较b，b值大的优先级高；依次类推，一直到d.

a:link, a:hover, a:active, a:visited 的顺序是怎样的？ 为什么？
a:link
a:visited
a:hover
a:active
在CSS中，如果对同样的元素有针对不同条件的定义，一般讲最一般的条件放在最上面，最特殊的条件放在最下面。
因为，浏览器在显示元素时，会从特殊到一般、逐级向上验证条件。

header 是ID选择器

.header 是类选择器
.header .logo 后代选择器，中间有空格，只选择类header下面的子元素logo
.header.mobile 中间没有风格符，.本身充当分隔符
.header p,.header h3 组合选择器，选择类.header 下的子元素p和类.header 下的子元素h3

header .nav>li id为header元素下的子元素nav下的直接子元素li

header a:hover id为header元素下的伪类子元素a:hover

选择id为header元素下的logo和所有p元素
选择id为header元素下的input元素中属性type="text"的元素

列出你知道的伪类选择器
a:visited
a:active
a:link
a:hover
a:focus
a:disabled
a:checked
a:first-child
a:enabled

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 匹配item1元素父容器下的类为item1的第一个子元素的颜色变为红色，所以aa显示为红色
.item1:first-of-type 匹配item1元素父容器下类为item1的同类标签的第一个，所以是aa,bb的背景色变蓝