任务7作业

1、class 和 id 的使用场景?

class 匹配class包含特定类的元素，
比如说页面有些元素有共同的特征。如果有个别不一样的
那么再加一个class属性。
如果是独一无二的那么我们就起名为id

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

1、基础选择器
2、组合选择器
3、属性选择器
4、伪类选择器
5、伪元素选择器

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

id选择器 > 类选择器 > 伪类选择器 > 属性选择器 > 标签选择器 > 通配符选择器
对于复杂场景
行内样式 用 a表示
id选择器用 b 表示
类选择器，伪类选择器，属性选择器 用 b表示
标签选择器用 d 表示
有哪一个选择器我们就在对应的上面加1。
比如 #test p.class1 和 #test .class1.class2
这两个比较 ，首先b的值是都为1 ，那么我们就继续往下比较 明显后者的c为2 而前者的c仅为1
所以，后者的优先级高于前者。

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

a:link a:visited a:hover a:active
a:visited 如果写在后面的话，会把a:hover a:active 给覆盖掉

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

#header { }
选择页面中id为header的元素
.header { }
选择页面中class为header的元素
.header .logo { }
选择器class为header里面的class为logo的元素
.header.mobile { }
选择class 既为header又为mobile的元素
.header p, .header h3 { }
给 class为header下的所有p标签和所有h3标签元素 加上同样的样式
#header .nav>li { }
选择id为header下class为nav的直接子元素里li标签
#header a:hover { }
选择id为header下的链接，给其在悬停状态添加样式
#header .logo~p { }
选择id为header下,匹配class为logo之后的同级p标签。
#header input[type="text"] { }
选择id为header下input标签类型为text的元素

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

• E:first-child
• E:link
• E:hover
• E:visited
• E:active
• E:checked
• E::selected
• E:fist-of-type
• E:nth-of-type(2)
• E:enabled
• E:disabled
• E:focus

7、div:first-child、div:first-of-type、div :first-child和div :first-of-type的作用和区别

写在这里

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

 

   
aa
   
bb
   
ccc
 

首先.item1:first-child { color: red; }通过观察发现.item1的父元素为同一个class为ct的div元素，这个父元素下的第一个元素是p标签，同时class为item1,所以就会把aa变成红色；
之后.item1:first-of-type{ background: blue; } 首先

aa

的父元素为class为ct的div元素，这个父元素下是p表签的只有一个，同时class也为item1
所以aa的背景色变成了蓝色。接着再看

bb

的父元素为class为ct的div元素，这个父元素下是h3标签的有两个，我们取第一h3标签，而这个h3的标签的clas正好是item1，所以bb的背景色为蓝色。最后一个

ccc

的父元素同上，这个父元素下h3标签，有两个，取第一个，而这个h3的标签正好是item1，所以bb的背景色为蓝色。结果就是aa,bb的背景色为蓝色。