课程任务
1. class和id的使用场景？
id: 定义到页面上唯一的元素，一个页面上不要出现相同id的两个元素。
class: 把一些特定的样式放到一个类中，需要此样式的标签，可以添加此类。
2. CSS的选择器常见的有几种
基础选择器包括：通用元素选择器，id选择器，类选择器，标签选择器；组合选择器；属性选择器；伪类选择器；伪元素选择器
3. 选择器的优先级是怎样的？对于复杂场景如何计算优先级？
- 在属性后面使用
!important会覆盖页面内任何位置定义的元素样式 - 作为style属性写在元素标签的内联样式
- id选择器
- 类选择器
- 伪类选择器
- 属性选择器
- 标签选择器
- 通配符选择器
- 浏览器自定义
- 继承
- 行内样式 ==> a
- id选择器 ==> b
- 类，属性选择器 ==> c
- 标签选择器、伪元素 ==> d
| 例子 | a | b | c | d | 权重 |
|---|---|---|---|---|---|
| * | 0 | 0 | 0 | 0 | 0 |
| li | 0 | 0 | 0 | 1 | 1 |
| ul li | 0 | 0 | 0 | 2 | 2 |
| ul ol+li | 0 | 0 | 0 | 3 | 3 |
| li.red.level | 0 | 0 | 2 | 1 | 21 |
| #x3y | 0 | 1 | 0 | 0 | 100 |
| #s12:not(FOO) | 0 | 1 | 0 | 1 | 101 |
比较权重大小，权重越大，优先级越高
4. a:link,a:hover,a:active,a:visited的顺序是怎样的？为什么？
示例
这是一个样式覆盖的问题。如上图，以图三为例，当a标签出于hover状态的时候，它包含hover,visited,link三个状态，此时要保证hover样式排在最后，hover状态才能正常显示，不会被其他状态覆盖。同理，分析其他的三个状态，最终得出的顺序是：a:link,a:visited,a:hover,a:active
5. 以下选择器分别是什么意思？
#head{
/*id为head的元素*/
}
.head{
/*class包含head的元素*/
}
.header .logo{
/*class包含header的元素后代中包含logo类的元素*/
}
.header.mobile{
/*class即包含header又包含mobile的元素*/
}
.header p, .header h3{
/*class包含header的元素后代中的p标签和h3标签*/
}
#header .nav>li{
/*id为header的元素后代中包含nav类元素的所有直接子元素li*/
}
#header a:hover{
/*id为header的元素后代中所有a标签的hover状态*/
}
#header .logo~p{
/*id为header的元素后代与包含logo类元素之后的同级p标签*/
}
#header input[type="text"]{
/*id为header的元素后代中type="text"的input标签*/
}
列出你知道的伪类选择器
| 选择器 | 含义 |
|---|---|
| E:link | 未被点击的链接 |
| E:visited | 已被点击的链接 |
| E:hover | 鼠标悬停其上的E元素 |
| E:active | 鼠标已经按下还未释放的E元素 |
| E:focus | 获得当前焦点的E元素 |
| E:first-child | 匹配E的父元素下作为长子的元素E(1.它是E 2.它是它父亲的第1个孩子) |
| E:nth-child(n) | 排序为第n个子元素的E元素（1.它是E 2.它是它父亲的第n个孩子） |
| E:first-of-type | 匹配父元素下使用同种标签的第一个子元素(1.它是E 2. 标签与E相同 3.它是它父亲的第1个孩子) |
| E:nth-of-type(n) | 匹配其父元素下使用同种标签的第n个子元素(1.它是E 2. 标签与E相同 3.它是它父亲的第n个孩子) |
| E:root | 匹配文档的根元素，对于HTML就是HTML标签 |
| E:last-child | |
| E:last-of-type |
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元素下第一个同类型的子元素
重点在于区分“第一个子元素为div”和“第一个div元素”
运行如下代码，解析下输出样式原因
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.item1:first-child{
color: red;
}
.item1:first-of-type{
background: blue;
}
</style>
</head>
<body>
<div class="ct">
<p class="item1">aa</p>
<h3 class="item1">bb</h3>
<h3 class="item1">ccc</h3>
</div>
</body>
</html>
.item1:first-child选中.item1父元素的第一子元素；.item1:first-of-type同时选中.item1父标签下p标签和h3标签的第一个元素。
