任务7

class和id的使用场景？

class选择器：又叫做类选择器，即给多个元素添加相同样式时，使用class选择器
id选择器：给一个单独的元素添加样式时，使用ID选择器

CSS选择器常见的有几种？

基础选择器：

1.标签选择器 2.类选择器（class） 3.ID选择器 4.全局选择器（*）

链接伪类选择器：

1.未访问(:link) 2.已访问(:visited) 3.鼠标悬停(:hover) 4.激活(:active)

其他伪类选择器：

• :first-child 相对于父元素的第一个子元素
• :focus 用户正在使用的元素（类似于表单中，正在填写哪个文本域）
• :lang(c) 元素中lang属性为c的元素
• :enabled 表单中可以使用的元素
• :disabled 表单中被禁用的元素
• :checked 表单中radio或者checkbox被选选中的元素
• ::selection 用户当前选中的元素

组合选择器：

• 群组选择器 同时给多个选择器添加样式，每个选择器之间用","隔开
• 后代选择器 给某个元素的某个子元素添加样式，用空格隔开
• 子元素选择器 给a元素下一级所有的b元素添加样式（只包含a元素的下一级的所有b元素，而不是a元素下所有的b元素）
• 直接相邻选择器 a+b 匹配a元素之后的相邻的同级b元素
• 普通相邻选择器 a～b 匹配a元素之后的所有同级b元素（不论相邻否）

其他选择器详解链接

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

简单情况下

image.png

复杂情况下：如下图所示，首先计算a,b,c,d的数值，有a的情况下，不看b,c,d，只比较a的大小。有b的情况下，不看c,d，只看b的大小。同理依次往下（a>b>c>d）

image.png

a:link,a:hover,a:active,a:visited的顺序是怎么样的？为什么？

a:link>a:visited>a:hover>a:active
这4个伪类属于同一级别，所以后写的会覆盖先写的样式。故当a:link必须第一个写，这样当链接出去其他状态时，a:link会被覆盖。对于a:hover和a:active和a:visited，当鼠标点击链接时的那一刻，链接处于3种状态，但需要显示a:active样式，所以a:active放在最后一个写。当鼠标点击链接之后，鼠标悬停链接，要显示a:hover样式，所以a:hover在a:visited之后。

以下选择器分别是什么意思？

• (#header{})
  给id为header的元素书写样式
• (.header{})
  给class为header的元素书写样式
• (.header .logo{})
  给class为header的元素的子元素中class为logo的元素书写样式
• (.header.mobile{})
  给class为header的元素的子元素中class为mobile的元素书写样式
• (.header p, .header h3{})
  同时给class为header的元素的子元素中p标签和class为header的元素的子元素h3标签书写样式
• (#header .nav>li{})
  给id为header的元素的子元素中class为nav元素的下一级子元素为li的标签书写样式
• (#header a:hover{})
  给id为header的元素的子元素中a标签悬停状态时书写样式
• (#header .logo~p{})
  给id为header的元素的子元素中所有class为logo以下的同级p标签书写样式
• (#header input[type="text"]{})
  给id为header的元素的子元素中type属性为text的input标签书写样式

列出你知道的伪类选择器

image.png

div:fitst-child,div:first-of-type,div: first-child和div: first-of-type的作用和区别

• div:first-child：匹配div父元素下第一个子元素是div的元素
• div:first-of-type：匹配div父元素下第一个div元素
• div: first-child：匹配所有div所有子元素中相对于父元素是第一个子元素
• div: first-of-type：匹配所有div所有子元素中相对于父元素是第一次使用的标签

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

image.png

因为.item:first-child{color:red;}匹配的是.item1父元素.ct下第一个子元素同时class为item的元素，故aa显示为红色。.item:first-of-type{background-color:blue;}匹配的是同种标签中第一个此类标签同时class为item的元素，故bb和ccc的背景颜色为蓝色。