1.class 和 id 的使用场景?
class使用场景：CSS操作，把一些特定样式放到一个class类中，需要此样式的标签，可以在添加此类。
id使用场景：根据提供的唯一id号，快速获取标签对象；用于充当label标签for属性的值：示例：<label for='userid'>用户名：</label>，表示单击此label标签时，id为userid的标签获得焦点。
2.CSS选择器常见的有几种?
1.基础选择器
| 选择器 | 作用 |
|---|---|
| * | 通用，匹配所有元素 |
| #id | id选择器，匹配特定ID的元素 |
| .class | 类选择器，匹配特定类名的元素 |
| element | 标签选择器 |
2.组合选择器
| 选择器 | 作用 |
|---|---|
| E，F | "，"分隔， 同时匹配E和F |
| E F | 空格分隔，匹配E元素所有后代 |
| E>F | >分隔，匹配E元素子元素 |
| E+F | 匹配E元素之后的相邻同级F元素 |
| E~F | 匹配E元素之后的所有同级F元素 |
| .class1.class2 | id和class选择器和选择器连写时中间没有连接符 |
3.伪类选择器
| 选择器 | 作用 |
|---|---|
| E:first-child | 匹配E元素的第一个子元素 |
| E:link | 匹配所有未被点击的链接 |
| E:visited | 匹配已被点击的链接 |
| E:active | 匹配鼠标已经按下还没有释放的E元素 |
| E:hover | 匹配鼠标悬浮其上的元素 |
| E:foucs | 匹配获得当前焦点的E元素 |
| 注意顺序：顺序l-v-h-a | |
| E:lang(c) | 匹配lang属性等于c的E元素 |
| E:enabled | 匹配表单中可用元素 |
| E:disabled | 匹配表单中禁用元素 |
| E:checked | 匹配表单中被选中的radio或checked元素 |
| E:selection | 匹配用户当前选中元素 |
| E:nth-child(n) | 匹配其父元素下的第n个子元素，第一个为1 |
| E:nth-last-child(n) | 匹配其父元素下的倒数第n个子元素，第一个为1 |
| E:nth-of-type(n) | 匹配使用同种标签的元素 |
| E:first-child | 匹配父元素的第一个子元素 |
| E:last-child | 匹配父元素的最后一个子元素 |
4.伪元素选择器
| 选择器 | 作用 |
|---|---|
| E:before | 在E元素之前插入生成的内容 |
| E:after | 在E 元素之后插入生成内容 |
5.属性选择器
| 选择器 | 作用 |
|---|---|
| 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的元素 |
3.选择器的优先级是怎样的?对于复杂场景如何计算优先级？
1.属性后面使用！important会覆盖任何位置定义的元素样式
2.style属性写在元素标签上的内联样式
3.id选择器
4.类选择器
5.伪类选择器
6.属性选择器
7.标签选择器
8.通配选择器
9.浏览器自定义
复杂场景：
行内样式多的优先，其次是ID选择器，再是类、属性、伪类选择器，最后是标签元素、伪元素选择器
4.a:link, a:hover, a:active, a:visited 的顺序是怎样的？ 为什么？
顺序 a:link>a:visited>a:hover>a:active；
鼠标经过未访问连接同时拥有a:link和a:hover属性，后面的属性会覆盖前面的属性定义。
鼠标经过已访问连接同时拥有a:visited和a:hover属性，后面的属性会覆盖前面的属性定义。
hover和active放在link和visited之后，active放在hover之后。
5.以下选择器分别是什么意思?
#header{} 匹配id为header的元素
.header{} 匹配类名为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元素的hover状态
#header .logo~p{} 匹配id为header的后代中class为logo的元素的所有同级P元素
#header input[type="text"]{} 匹配id为header元素的后代中type=text的input元素
列出你知道的伪类选择器
| 选择器 | 作用 |
|---|---|
| E:first-child | 匹配E元素的第一个子元素 |
| E:link | 匹配所有未被点击的链接 |
| E:visited | 匹配已被点击的链接 |
| E:active | 匹配鼠标已经按下还没有释放的E元素 |
| E:hover | 匹配鼠标悬浮其上的元素 |
| E:foucs | 匹配获得当前焦点的E元素 |
| E:lang(c) | 匹配lang属性等于c的E元素 |
| E:enabled | 匹配表单中可用元素 |
| E:disabled | 匹配表单中禁用元素 |
| E:checked | 匹配表单中被选中的radio或checked元素 |
| E:selection | 匹配用户当前选中元素 |
| E:nth-child(n) | 匹配其父元素下的第n个子元素，第一个为1 |
| E:nth-last-child(n) | 匹配其父元素下的倒数第n个子元素，第一个为1 |
| E:nth-of-type(n) | 匹配使用同种标签的元素 |
| E:first-child | 匹配父元素的第一个子元素 |
| E:last-child | 匹配父元素的最后一个子元素 |
div:first-child和div:first-of-type的作用和区别
- div:first-child:匹配div元素的第一个子元素
- div:first-of-type:匹配父元素的首个div元素
运行如下代码，解析下输出样式的原因。
<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>
Paste_Image.png
- .item1:first-child：选取class为item1的父元素下的第一个子元素，所以aa字体为红色。
- .item1:first-of-type：选取class为item1的父元素下使用同种标签的第一个子元素，所以aa和bb的背景为蓝色。
