1.class和id选择器的使用场景
id选择器匹配特定id的元素，在整个页面中是唯一的。
class是类选择器，匹配包含(不是等于)特定类的元素。
2.CSS常见的选择器
通用元素选择器
<style>
*{color:red;}
</style>id选择器
<style>
#box{color:red;}
</style>
<div id="box"> <p>jirengu</p> </div>类选择器
<style> .box{color:.red;} </style> <div class="box"> jirengu </div>标签选择器
<style> div{color:red;} </style> <div> jirengu </div>派生选择器 （选择元素下的子元素）
<style> .box p{color:red;} </style> <div class="box"> <p>jirengu</p> </div> <div class="box"> hhh </div>多元素选择器（同时匹配元素）
<style> .box,#mix{color:red} </style> <div class="box"> jirengu </div> <div id="mix"> hhh </div>伪类选择器(标签，class后面加伪类)
3.选择器的优先级是怎样的?对于复杂场景如何计算优先级？
选择器从高到低分别是
- 在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式
- 作为style属性写在元素标签上的内联样式
- id选择器
- 类选择器
- 伪类选择器
- 属性选择器
- 标签选择器
- 通配符选择器
- 浏览器自定义
复杂场景优先级计算
选择器的特殊性分为4个等级，a b c d，从左到右，越左边的越优先, 如果一个选择器规则有多个相同类型选择器，则+1。等级如下：
行内样式 <div style="xxx"></div> ==> a
ID 选择器 ==> b
类，属性选择器和伪类选择器 ==> c
标签选择器、伪元素 ==> d
| 选择器 | 特殊性 |
|---|---|
| style="color: red" | a= 1, 0, 0, 0 |
| #id {} | 0, b=1, 0, 0 |
| #id #aid | 0,b= 2, 0, 0 |
| .sty {} | 0, 0, c=1, 0 |
| .sty p[title=""] {} | 0, 0, c=2, 0 |
| p:hover {} | 0, 0,c= 1, 0 |
| p {} | 0, 0, 0,d= 1 |
| ul::after {} | 0, 0, 0, d=1 |
| div p {} | 0, 0, 0,d= 2 |
4.a:link, a:hover, a:active, a:visited 的顺序是怎样的？ 为什么？
正确顺序应为：a：link a：visited a:hover a:active
原因：
- 当选择器优先级别相同时，后定义的会覆盖先定义的
- 以此类推，当鼠标经过未访问链接，同时有link和hover属性，
由于后定义的覆盖先定义的，所以hover在后面 - 以此类推，当鼠标经过已访问链接，同时有visited和hover属性，
由于后定义的覆盖先定义的，所以hover在link和visited后面
5.以下选择器分别是什么意思?
- .#header{}：匹配Id=header的元素
- .header{}:匹配类class=header的元素
- header .logo{}：
匹配类为header元素的后代元素中类为logo的元素 - .header.mobile{}：
匹配class同时包含header和mobile的元素 - .header p, .header h3{}：
匹配两个类型的元素（并集，‘或’关系），类型1是header类的后代p标签，类型2是header类的后代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的后代中，input标签中属性type的值为"text"的元素集合
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 | 匹配用户当前选中的元素 |
7.div:first-child和div:first-of-type的作用和区别?
- first-child匹配的是其父元素的第一个子元素；
- first-of-type匹配的是其父元素下相同类型子元素中的第一个。
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下的第一个元素则为p标签里面的aa，所有aa显示为红色
- .item1:first-of-type选中的是类名为item1的父元素div下的同类元素的第一个元素，即p元素中的第一个p元素里面的aa和2个h3元素中的第一个h3元素里的内容bb，所有aa和bb的背景色为蓝色。
