初级前端面试 CSS 高频面试题（含详细落地答案）.docxVIP

初级前端面试CSS高频面试题（含详细落地答案）

说明：本套题目针对0-2年初级前端，全部为面试高频原题，答案贴合实际开发、口语化无机器感，摒弃晦涩理论，侧重工程落地理解。

一、CSS基础核心题

1.说说CSS选择器有哪些？优先级如何计算？

常用选择器：

基础：标签选择器、类选择器、id选择器、通配符选择器（*）

进阶：后代选择器、子代选择器、相邻兄弟选择器、通用兄弟选择器、属性选择器、伪类、伪元素

优先级规则（从高到低）：

!important（最高）内联样式（style）id选择器类/伪类/属性选择器标签选择器通配符/继承样式

补充实战要点：

1.优先级是逐位比较，不叠加进位，比如1个id永远大于100个类名；

2.继承的样式优先级最低，比不上任何手动写的选择器；

3.尽量少用!important，项目里优先级混乱基本都是它导致的，覆盖样式优先提升选择器权重。

2.伪类和伪元素的区别？常用的有哪些？

核心区别：

1.伪类（单冒号:）：给已有元素添加状态样式，不生成新DOM，比如hover、active；

2.伪元素（双冒号::）：生成虚拟DOM元素，可以单独设置样式、内容，相当于新增了一个看不见的标签。

常用伪类：:hover、:active、:focus、:nth-child()、:first-child、:visited