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:hover | 匹配鼠标悬停其上的E元素 |
| E:focus | 匹配获得当前焦点的E元素 |
| E:lang(c) | 匹配lang属性等于c的E元素 |
| E:enabled | 匹配表单中可用的元素 |
| E:disabled | 匹配表单中禁用的元素 |
| E:checked | 匹配表单中被选中的radio或checkbox元素 |
| E::selection | 匹配当前选中的元素 |
| E:first-of-type | 匹配父元素下使用同种标签的第一个子元素，等同于：nth-last-type(1) |
| E:nth-child(n) | 匹配其父元素的第n个子元素，第一个编号为1 |
- 伪元素选择器
| 选择器 | 含义 |
|---|---|
| E::before | 在E元素之前插入生成的内容 |
| E::after | 在E元素之后插入生成的内容 |
3.选择器的优先级是怎样的？对于复杂场景如何计算优先级？
- 优先级别由高到低为
1.在属性后面使用“!important”会覆盖页面内任何位置定义的元素样式
2.作为style属性写在元素标签上的内联样式
3.id选择器
4.类选择器
5.伪类选择器
6.属性选择器
7.标签选择器
8.通配符选择器
9.浏览器自定义 - 复杂场景优先级别判定
假设：
行内样式<div style="xxx"></div>代号为“a”
id选择器代号为“b”
类，属性选择器、伪类选择器代号为“c”
标签选择器、伪元素选择器代号为“d”
举例：
| 代码 | 计数 |
|---|---|
p { } |
a=0 b=0 c=0 d=1 |
a:hover { } |
a=0 b=0 c=1 d=1 |
ul li { } |
a=0 b=0 c=0 d=2 |
ul ol+li { } |
a=0 b=0 c=0 d=3 |
h1+input[type=hidden] { } |
a=0 b=0 c=1 d=2 |
ul ol li.active { } |
a=0 b=0 c=1 d=3 |
#ct .box p |
a=0 b=1 c=1 d=1 |
div#header:after |
a=0 b=1 c=0 d=2 |
style="xxx" |
a=1 b=0 c=0 d=0 |
比较规则：先比较a的大小，a大的优先级高；如果a相等，再比较b的大小，b大的优先级高以此类推。
在以下代码中：
#test p.class1{}
#test .class1.class2
两者都有id"text"就是b相同，下面这条代码有两个class则为有两个c则优先下面这条代码
注意：
1.!important的优先级是最高的，但出现冲突时则需比较”四位数“;
2.优先级相同时，则采用就近原则，选择最后出现的样式;
3.继承得来的属性，其优先级最低;
!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认
4.a:link,a:houer,a:visited的顺序是怎么样的，为什么？
a:link:匹配所有未被点击的链接
a:houer:匹配鼠标悬停其上的a元素
a:active:匹配鼠标已经其上按下、还没有释放的元素
a:visited:匹配所有已被点击的链接
因为四个选择器都为同级，为了避免相互覆盖，推荐用以下顺序：
a:link → a:visited → a:hover → a:active
(未点击) (已点击) (鼠标悬停) (按鼠标未释放)
5.以下选择器分别是什么意思？
- 列出你知道的伪选择器
- div:first-child、div:first-of-type、div :first-child和div :first-of-type的作用和区别 （注意空格的作用）
- 运行如下代码，解析下输出样式的原因。
答：
-
选择器含义：
- 伪类选择器
| 选择器 | 含义 |
|---|---|
| E:first-child | 匹配元素E的第一个子元素 |
| E:link | 匹配所有未被点击的链接 |
| E:visited | 匹配所有已被点击的链接 |
| E:active | 匹配鼠标已经其上按下、还没有释放的元素 |
| E:hover | 匹配鼠标悬停其上的E元素 |
| E:focus | 匹配获得当前焦点的E元素 |
| E:lang(c) | 匹配lang属性等于c的E元素 |
| E:enabled | 匹配表单中可用的元素 |
| E:disabled | 匹配表单中禁用的元素 |
| E:checked | 匹配表单中被选中的radio或checkbox元素 |
| E::selection | 匹配当前选中的元素 |
| E:first-of-type | 匹配父元素下使用同种标签的第一个子元素，等同于：nth-last-type(1) |
| E:nth-child(n) | 匹配其父元素的第n个子元素，第一个编号为1 |
- 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的后代中的同种类型标签的第一个元素 |
代码输出样式及原因：
.item1:first-child{
color: red;
}
含义是class="item1"下第一个子元素的字体变为红色
.item1:first-of-type{
background: blue;
}
含义是class="item1"下的有相同标签的第一个子元素背景变为蓝色
