任务七

一 class 和 id 的使用场景？

• id 定义： 指定标签的唯一标识。

• 场景

1. 根据提供的唯一 id 号，快速获取标签对象。
   document.getElementById(id)

2. 用于充当lable标签的for属性值
   <label for='userid'>用户名：</label>，表示单击此label标签时，id为userid的标签获得焦点。

• class 定义： 指定标签的类名。

• 场景

1. CSS操作，把一些特定的样式放到一个 class 类中，需要此样式的标签 可以添加此类。

二 CSS选择器常见的有几种

1. id 选择器

选择器	例子	描述
#id	#firstname	选择 id="firstname" 的所有元素。

2. class 选择器

选择器	例子	描述
.class	.intro	选择 class="intro" 的所有元素。

3. 伪类选择器

选择器	例子	描述
:first-child	p:first-child	选择属于父元素的第一个子元素的每个 <p> 元素。
:link	a:link	选择所有未被访问的链接。
:visited	a:visited	选择所有已被访问的链接。
:active	a:active	选择活动链接。
:hover	a:hover	鼠标指针位于其上的链接。
:focus	input:focus	选择获得焦点的 input 元素。
:lang(language)	p:lang(it)	选择带有以 "it" 开头的 lang 属性值的每个 <p> 元素。
:enabled	input:enabled	选择每个启用的 <input> 元素。
:disabled	inpput:disabled	选择每个禁用的 <input> 元素
:checked	input:checked	选择每个被选中的 <input> 元素。
::selection	::selection	选择被用户选取的元素部分。
:root	:root	选择文档的根元素。
:nth-child(n)	p:nth-child(2)	选择属于其父元素的第二个子元素的每个 <p> 元素。
:nth-last-child(n)	p:nth-last-child(2)	同上，从最后一个子元素开始计数。
:nth-of-type(n)	p:nth-of-type(2)	选择属于其父元素第二个 <p> 元素的每个 <p> 元素。
:nth-last-of-type(n)	p:nth-last-of-type(2)	同上，但是从最后一个子元素开始计数。
:last-child	p:last-child	选择属于其父元素最后一个子元素每个 <p> 元素。
:first-of-type	p:first-of-type	选择属于其父元素的首个 <p> 元素的每个 <p> 元素。

4. 伪元素选择器

选择器	例子	描述
:first-line	p:first-line	选择每个 <p> 元素的首行。
:first-letteer	p:fitst-letter	选择每个 <p> 元素的首字母。
:first-child	p:firsr-child	选择属于父元素的第一个子元素的每个 <p> 元素。
:before	p:before	在每个 <p> 元素的内容之前插入内容。
:after	p:after	在每个 <p> 元素的内容之后插入内容。

5.属性选择器

选择器	例子	描述
[attribute]	[target]	选择带有 target 属性所有元素。
[attribute=value]	[target=_blank]	选择带有 target 属性所有元素。
[attribute~=value]	[title~=flower]	选择 title 属性包含单词 "flower" 的所有元素。
[attribute^value]	a[src^="https"]	选择其 src 属性值以 "https" 开头的每个 <a> 元素。
[attribute$=value]	a[src$=".pdf"]	选择其 src 属性以 ".pdf" 结尾的所有 <a> 元素。
[attribute*value]	a[src*="abc"]	选择其 src 属性中包含 "abc" 子串的每个 <a> 元素。

6.标签选择器

选择器	例子	描述
element	p	选择所有 <p> 元素。
element ,element	div,p	选择所有 <div> 元素和所有 <p> 元素。
element element	div p	选择 <div> 元素内部的所有 <p> 元素。
element>element	div>p	选择父元素为 <div> 元素的所有 <p> 元素。
element+element	div+p	选择紧接在 <div> 元素之后的所有 <p> 元素。

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

• 选择器的优先级是怎样的?

1.在属性后面使用 ! important 会覆盖页面内任何位置定义的元素样式

2. 作为style属性写在元素标签上的内联样式
3. id选择器
4. 类选择器
5. 伪类选择器
6. 属性选择器
7. 标签选择器
8. 通配符选择器
9. 浏览器自定义

• 对于复杂场景如何计算优先级？

a. 内联样式
b. ID 选择器
c. 类、属性选择器和伪类选择器
d. 标签选择器、伪元素

比较方法：a>b>c>d，当优先级相同时，计算同一级的个数，个数多的优先级大

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

顺序：a:link > a:visited > a:hover > a:active

1. 如果，a:link写在a:hover之后，依据CSS层叠特性，a:link将覆盖a:hover样式，鼠标移动到a链接上a:hover将不会生效，这不是我们预期的效果，所以a:link要写在a:hover前。

2. 如果，a:link写在a:active之后，同理，a:link覆盖了a:active样式，鼠标点击a链接时，a:active将不会生效，所以，a:link要写在a:active前。

3. 如果，a:hover写在a:active之后，那么，a:hover覆盖a:active样式，要想点击a链接，一定会先经过鼠标移动到a链接之上这个步骤。所以，当点击a链接时，a:active将不会生效，所以，a:hover要写在a:active前。

4. 而a:visited，跟a:link类似，它发生在a:link之后, 把a:visited写在a:hover和a:active会覆盖它们的效果，所以它的位置，只能在第二位了。

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

#header {
    /*id选择器*/
}
.header {
    /*class选择器*/
}
.header.mobile {
    /*同时有class= "header"和class="mobile"的元素*/
}
.header p, .header h3 {
    /*多元素选择器，class= "header"下的后代p元素 和 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 元素*/
}

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

选择器	例子	描述
:first-child	p:first-child	选择属于父元素的第一个子元素的每个 <p> 元素。
:link	a:link	选择所有未被访问的链接。
:visited	a:visited	选择所有已被访问的链接。
:hover	a:hover	鼠标指针位于其上的链接。
:active	a:active	选择活动链接。
:focus	input:focus	选择获得焦点的 input 元素。

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

• div:first-child 匹配父元素的第一个div子元素

• div:first-of-type 匹配父元素下使用同种标签的第一个div子元素的每个元素

• div :first-child 匹配div的首个子元素

• div :first-of-type 匹配 div 的子元素中相同标签的第一个元素

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

http://js.jirengu.com/gomosukayu/4/edit

.item1:first-child{ color: red;}代表class值为item1的元素的父元素下的第一个子元素的字体颜色为红色，即第一个子元素p为红色，即aa为红色

.item1:first-of-type{background: blue;}代表class值为item1的元素的父元素下的第一个同类型的子元素的背景颜色为蓝色，代码中class值为item1的元素有三个，类型为两种p和h3，p元素对应父元素下的第一个同类型的子元素就是自己，即aa的背景为蓝色。两个h3元素对应父元素下的第一个同类型的子元素就是第一个h3元素，即bb的背景为蓝色