task7

1.class 和 id 的使用场景?

• id的使用场景: id只能被使用一次，在页面分段等场景下可以使用。
• class的使用场景: class可以多次使用，用来给不同的元素设置相同的样式。

2.CSS选择器常见的有几种?

1.基础选择器
包含通配符选择器，标签选择器，类选择器，id选择器。

2.组合选择器
包含:

• 多元素选择器(a,b):用,分隔，同时匹配元素E或元素F
• 后代选择器(e f):用空格分隔，匹配E元素所有的后代元素F(全部)
• 子元素选择器(e>f):用>分隔，匹配E元素的所有直接子元素(下一级)
• 直接相邻选择器(e+f): 匹配E元素之后的相邻的同级元素F(不改变+号前面e的样式)
• 普通相邻选择器(e~f): 匹配E元素之后的全部同级元素F

3.属性选择器

• E[attr]:匹配所有具有属性attr的元素，div[id]就能取到所有有id属性的div
• E[attr = value]:匹配属性attr值为value的元素(div[id=test] 匹配id=test的div)

4.伪类选择器

• E:hover/link/active/visited:给元素在某个状态下添加样式
• E:nth-child(n):选中第n个子元素
• E:first-child 选取作为父元素第一个子元素的E元素(F E:first-child)
• E:last-child:选取作为父元素最后一个个子元素的E元素
• E:nth-of-type(n):与:nth-child(n)作用类似，但是仅匹配使用同种标签的元素(与E相同的子元素)
• E:enabled/disabled : 选取表单中可用/禁用的元素

5.伪元素选择器

• E::before : 在E元素之前插入生成的内容
• E::after : 在E元素之后插入生成的内容

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

CSS优先级从高到低分别是:
在属性后面使用 !important > 内联样式 > id选择器 > 类选择器 > 伪类选择器 > 属性选择器 >标签选择器 > 通配符选择器 > 浏览器自定义
在复杂场景下先计算优先级最高的元素的个数,个数多优先级高,若相同则比较优先级第二高的,以此类推.

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

a:link最先，然后是a:visited.之后是a:hover,最后是a:active.
写在后面的样式会覆盖写在前面的样式,对于a:link,如果放在后面则会覆盖掉放在前面的样式,所以应该放在最前面。a:visited生效时应该覆盖掉a:link又不影响到其它两个，所以放在a:link的后面。a:active必须要鼠标放在元素上才能生效，而这会先调用a:hover的样式，所以a:active需要放在a:hover的后面，否则会被a:hover覆盖掉。(生效范围小的放在后面)

5.以下选择器分别是什么意思?

• #header : 选择id为header的元素
• .header : 选择类为header的元素
• .header .logo : 选择header类中的logo类中的元素
• .header.mobile : 选择类名中既有header又有mobile的元素
• .header p, .header h3 : 选择header类中的p和h3元素
• #header .nav>li : 选择id为header下的nav类中第一层子元素中的li
• #header a:hover : 选择id为header下的在hover状态下的a链接
• #header .logo~p : 选择id为header下的在logo类之后与logo类同级的p元素(不包括logo类和logo类之前的元素)
• #header input[type="text"] : id为header下的input的type为text的元素

6.列出你知道的伪类选择器

见2

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

div:first-child : 选择其父元素中既是第一个又是标签为div的子元素(不满足就不选)
div :first-child : 选择每个div中的第一个元素
div:first-of-type: 选择其父元素中的第一个div元素
div :first-of-type : 选择每个div下第一次出现的标签

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

捕获.JPG

.item1:first-child改变div下第一个元素的样式，所以aa变红了。
.item1:first-of-type改变div下第一次出现的标签的样式，所以第一个p所在的第一行和第一个h3所在的第二行背景色变蓝了。