CSS选择器（入门7作业）

1.class 和 id 的使用场景?

当页面中某元素的样式并不独有，或与其他元素共用一个样式时，可以为该元素指定一个class值来使用类选择器。
当页面中某元素的样式为其独一无二占有时，可以为该元素指定一个id值来使用id选择器。

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

• 基础选择器
  * 通用元素选择器，匹配页面任何元素（这也就决定了我们很少使用）
  #id id选择器，匹配特定id的元素
  .class 类选择器，匹配class包含(不是等于)特定类的元素
  element 标签选择器

• 组合选择器
  E,F 多元素选择器，用,分隔，同时匹配元素E或元素F
  E F 后代选择器，用空格分隔，匹配E元素所有的后代（不只是子元 素、子元素向下递归）元素F
  E>F 子元素选择器，用>分隔，匹配E元素的所有直接子元素
  E+F 直接相邻选择器，匹配E元素之后的相邻的同级元素F
  E~F 普通相邻选择器（弟弟选择器），匹配E元素之后的同级元素F（无论直接相邻与否）
  .class1.class2 id和class选择器和选择器连写的时候中间没有分隔符，. 和 # 本身充当分隔符的元素
  element#id id和class选择器和选择器连写的时候中间没有分隔符，. 和 # 本身充当分隔符的元素

• 属性选择器
  E[attr] 匹配所有具有属性attr的元素，div[id]就能取到所有有id属性的div
  E[attr = value] 匹配属性attr值为value的元素，div[id=test],匹配id=test的div
  E[attr ~= value] 匹配所有属性attr具有多个空格分隔、其中一个值等于value的元素
  E[attr ^= value] 匹配属性attr的值以value开头的元素
  E[attr $= value] 匹配属性attr的值以value结尾的元素
  E[attr *= value] 匹配属性attr的值包含value的元素

• 伪类选择器
  E:first-child 匹配作为长子（第一个子女）的元素E
  E:link 匹配所有未被点击的链接
  E:visited 匹配所有已被点击的链接
  E:active 匹配鼠标已经其上按下、还没有释放的E元素
  E:hover 匹配鼠标悬停其上的E元素
  E:focus 匹配获得当前焦点的E元素
  E:lang(c) 匹配lang属性等于c的E元素
  E:enabled 匹配表单中可用的元素
  E:disabled 匹配表单中禁用的元素
  E:checked 匹配表单中被选中的radio或checkbox元素
  E::selection 匹配用户当前选中的元素
  E:root 匹配文档的根元素，对于HTML文档，就是HTML元素
  E:nth-child(n) 匹配其父元素的第n个子元素，第一个编号为1
  E:nth-last-child(n) 匹配其父元素的倒数第n个子元素，第一个编号为1
  E:nth-of-type(n) 与:nth-child()作用类似，但是仅匹配使用同种标签的元素
  E:nth-last-of-type(n) 与:nth-last-child() 作用类似，但是仅匹配使用同种标签的元素
  E:last-child 匹配父元素的最后一个子元素，等同于:nth-last-child(1)
  E:first-of-type 匹配父元素下使用同种标签的第一个子元素，等同于:nth-of-type(1)

• 伪元素选择器
  E::first-line 匹配E元素内容的第一行
  E::first-letter 匹配E元素内容的第一个字母
  E::before 在E元素之前插入生成的内容
  E::after 在E元素之后插入生成的内容

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

css优先级从高到低分别是

1. 在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式
2. 作为style属性写在元素标签上的内联样式
3. id选择器
4. 类选择器
5. 伪类选择器
6. 属性选择器
7. 标签选择器
8. 通配符选择器
9. 浏览器自定义

复杂场景下选择器特殊性计算方法。

• 每个id选择器，特殊性增加0,1,0,0
• 每个类，属性，伪类选择器增加0,0,1,0
• 每个元素，伪元素选择器增加0,0,0,1
• 通配选择器特殊性为0,0,0,0
• 内联样式特殊性为1,0,0,0

举例：

p.aaa em.bbb{color: red;}
div#ccc p[class]{color: bule;}

前者有两个元素选择器，两个类选择器，故特殊性相加为0,0,2,2
后者有一个id选择器，两个元素选择器，一个属性选择器。故特殊性相加为0,1,1,2
后者优先级胜出。

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

a:link{...}
a:visited{...}
a:hover{...}
a:active{...}

正确顺序如上。
由于四个选择器特殊性相同，所以只有位置不同会影响显示效果。
a:link表示链接未点击的状态，而点击后的状态想要正常显示，则点击后状态的样式优先级必须大于未点击状态，所以a:visited写在a:link之后。
同样的，鼠标悬停时的样式想要正常显示，则a:hover样式必须覆盖a:visited。而鼠标点击时的样式最为特殊，且优先级最高，故写在最后。
所以优先级从小到大依次为a:link，a:visited，a:hover，a:active。

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的元素。
这些类名为nav的元素中如果有直接子元素<li>，则选中它们。
#header a:hover{
}
选择id为header的元素后代中的所有<a>元素鼠标悬停时的状态
#header .logo~p{
}
先选择出id为header的元素后代中所有类名为logo的元素。
这些类名为logo的元素如果有同级的<p>元素，则选中它们。
#header input[type="text"]{
}
选择id为header的元素后代中的所有type值为text的<input>元素

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

E:first-child 匹配作为长子（第一个子女）的元素E
E:link 匹配所有未被点击的链接
E:visited 匹配所有已被点击的链接
E:active 匹配鼠标已经其上按下、还没有释放的E元素
E:hover 匹配鼠标悬停其上的E元素
E:focus 匹配获得当前焦点的E元素
E:lang(c) 匹配lang属性等于c的E元素
E:enabled 匹配表单中可用的元素
E:disabled 匹配表单中禁用的元素
E:checked 匹配表单中被选中的radio或checkbox元素
E::selection 匹配用户当前选中的元素
E:root 匹配文档的根元素，对于HTML文档，就是HTML元素
E:nth-child(n) 匹配其父元素的第n个子元素，第一个编号为1
E:nth-last-child(n) 匹配其父元素的倒数第n个子元素，第一个编号为1
E:nth-of-type(n) 与:nth-child()作用类似，但是仅匹配使用同种标签的元素
E:nth-last-of-type(n) 与:nth-last-child() 作用类似，但是仅匹配使用同种标签的元素
E:last-child 匹配父元素的最后一个子元素，等同于:nth-last-child(1)
E:first-of-type 匹配父元素下使用同种标签的第一个子元素，等同于:nth-of-type(1)

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

div:first-child
表示选择父元素下的第一个子元素<div>。
div:first-of-type
表示父元素下使用同种标签的第一个<div>元素。

区别：
div:first-child只能选择长子（第一个子女）。
div:first-of-type则只需父元素中存在<div>子元素即可选中。
若父元素的第一个子元素是<div>，则两种方法都能选中。若<div>不是父元素的第一个子元素，如果为第二个或第三个子元素，则div:first-child会选不到该<div>元素。

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

<style>
.item1:first-child{
  color: red;
}
.item1:first-of-type{
  background: blue;
}
</style>
 <div class="ct">
   <p class="item1">aa</p>
   <h3 class="item1">bb</h3>
   <h3 class="item1">ccc</h3>
 </div>

输出样式如图

.item1:first-child表示选择父元素下第一个类名为item1的子元素。代码中<div>下的第一个类名为item1的子元素为p元素。所以p元素中的字符aa获得样式显示为红色。
.item1:first-of-type表示选择父元素下使用同种标签的所有第一个子元素，且这些子元素要有类名item1。p元素只有一个，所以直接被选中。两个h3则选择第一个。所以字符aa与bb获得样式显示蓝的背景。