一、class 和 id 的使用场景?
- id匹配特定的id，定位页面某一特定的元素
- class 类选择器，匹配class包含（不是等于）特定的元素，定位某一类的元素
二、 CSS选择器常见的几种类型
1、基础选择器
*匹配页面任何元素
id匹配特定的id，定位页面某一特定的元素
class 类选择器，匹配class包含（不是等于）特定的元素，定位某一类的元素
2、组合选择器
E,F 多元素选择器，同时选择E F
E F 后代选择器
E>F 子元素选择器，匹配E元素所有直接子元素
E+F 直接相邻选择器
E~F 普通相信选择器，E所有的邻居
3、属性选择器
4、伪类选择器
一个元素处于另外一种状态
a的伪类选择器顺序：1 a{} 2 a:visited{}3 a:hover{} 4 a:active{}
5、伪元素选择器
三、选择器的优先级是怎样的?对于复杂场景如何计算优先级？
选择器优先级：1、在属性后面使用！import，覆盖所有的样式
2、作为style属性，写在元素标签上的内联样式
3、id选择器
4、类选择器
5、伪类选择器
6、属性选择器
7、标签选择器
8、通配符选择器
9、浏览器自定义
复杂场景优先级：当按照以上优先级出现冲突时，则按照选择符对应的数相加后得到的四位数，从左到右进行比较，大的优先级越高
四个级别：行内选择符、id选择器、类选择器、元素选择器对应的初始四位数 0、0、0、0，根据个数来算，从左到右进行比较，大的优先级越高，1,0,0,0 > 0,99,99,99
四、a:link, a:hover, a:active, a:visited 的顺序
：1 a：link 2 a:visited{}3 a:hover{} 4 a:active{}
由于会出现相互覆盖的情况，所以要按照这个顺序执行
五、
#header{} // 为id等于header的设置样式
.header{} // 为类是header的一类元素设置样式
.header .logo{} // 为class是header 子元素中class是 logo的的元素设置样式
.header.mobile{} clas同时有header 和mobile的元素设置元素设置样式
.header p, .header h3{ } // class 为header后代中，p元素和h3元素设置样式
#header .nav>li{} // id 是header 的子元素中id为nav的所有直接子元素li 设置样式
#header a:hover{} //id 为header的子元素中，a元素处于悬浮状态时候的样式
#header .logo~p{} // id 为header的子元素中，class是logo的所有相邻的p元素设置样式
#header input[type="text"]{} // id 是header的子元素中，input的元素type是text的所有元素设置样式
六 列出你知道的伪类选择器
伪类选择器:
| 标签 | 描述 |
|---|---|
| a:link | 匹配所有未被点击的链接 |
| a:visited | 匹配所有已经被点击的链接 |
| a:hover | 匹配a链接处于悬浮状态的元素 |
| E:focus | 匹配当前处于焦点的元素 |
| E:disabled | 匹配被禁用的元素 |
| E:checked | 匹配被选中的radio或者checkbox元素 |
| E:selection | 匹配用户当前选中的元素 |
| E:last-child | 匹配父元素的最后一个子元素 |
| E:first-of-type | 匹配父元素下使用同种标签的第一个子元素 |
| E:last-of-type | 匹配父元素下使用同种标签的最后一个子元素， |
七 div:first-child和div:first-of-type的作用和区别
div:first-child ： div第一个子元素
div:first-of-type：父元素下的同种类型的第一个元素
