1. class 和 id 的使用场景?
id：id选择器，id具有唯一性，一个id只能匹配一个元素，且一个标签只能有一个id多用于页面分块的块级标签上；
class：类选择器，class是类别标识，表明当前元素属于哪一类，一个标签可以有多个类且同一个类可以用到不同的标签上，多用于多个标签样式相似或完全相同时
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] | 匹配所有属性为value的元素（div[type=text]匹配id=text的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:nth-child(n) | 匹配其父元素的第n个子元素，第一个编号为1 |
| E:last-child | 匹配父元素的最后一个子元素 |
| E:nth-last-child(n) | 匹配其父元素的倒数第n个子元素，第一个编号为1 |
| E:first-of-type | 匹配父元素下使用同种标签的第一个子元素，等同于nth-of-type(1) |
| E:nth-of-type(n) | 与:nth-child()作用类似，但是仅匹配使用同种标签的元素 |
| 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::first-line | 匹配E元素的第一行 |
| E::first-letter | 匹配E元素的第一个字母 |
| E::before | 在e元素之前插入生成的内容 |
| E::after | 在e元素之后插入生成的内容 |
3.选择器的优先级是怎样的?对于复杂场景如何计算优先级？
（1）属性后+!important：p {color:#aaa!important;}在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式
（2）内联样式：作为style属性写在元素标签上的内联样式
（3）id选择器： #id { }
（4）类选择器： .class { }
（5）伪类选择器：a:link { }
（6）属性选择器：input[type=password] { }
（7）标签选择器：p { }
（8）通配选择器：*{ }
（9）浏览器自定义
复杂场景时，计算优先级时通过数标签来计算，先数id，如果id相等再数类，如果id不相等，id多的选择器权重高，权重越高，优先级越高。如果id选择器数量相同，再数类选择器，最后数标签。
4.a:link, a:hover, a:active, a:visited 的顺序是怎样的？ 为什么？
a:link
a:visited
a:hover
a:active
这是因为a:link,a:visited,a:hover和a:active，这四个选择器拥有相同的优先级，但是被写在最后的选择器会覆盖掉之前的选择器，因此要想实现“当鼠标移动到a标签上变换颜色”的效果，需要将a:hover置于 a:link 和 a:visited 之后,
5.div:first-child、div:first-of-type、div :first-child和div :first-of-type的作用和区别 （注意空格的作用）
- div:first-child div标签的父元素下第一个子元素且其必须为div元素
- div:first-of-type div标签的父元素下第一个div元素
- div :first-child div元素下的所有后代的第一个子元素
- div :first-of-type div元素下的所有后代中标签相同的第一个子元素
6.以下选择器分别是什么意思?
#header{}/*id选择器，匹配 id值为header的标签 */
.header{}/*class选择器，匹配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元素后代中的a元素指定鼠标移动到其上方的样式 */
#header .logo~p{}/*在id值为header的元素后代中寻找：class值为logo元素之后的同级p元素*/
#header input[type="text"]{}/*在id值为header的元素后代中寻找type属性为”text"的input元素*/
7.代码运行如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<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>
结果如下：
截图07.png
原因：first-child匹配其父级#ct下的第一个类别为item1的元素，所以仅有aa为红色；first-of-type匹配其父级#ct下的各元素下第一个类别为item1的元素，所以仅有aa和bb所在行有背景色（蓝色）。
网友评论