2024年最全【建议收藏】万字整理，一篇文章帮你掌握 Css 选择器(3)，2024最新阿里前端高级面试题总结

总结

大厂面试问深度，小厂面试问广度，如果有同学想进大厂深造一定要有一个方向精通的惊艳到面试官，还要平时遇到问题后思考一下问题的本质，找方法解决是一个方面，看到问题本质是另一个方面。还有大家一定要有目标，我在很久之前就想着以后一定要去大厂，然后默默努力，每天看一些大佬们的文章，总是觉得只有再学深入一点才有机会，所以才有恒心一直学下去。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

答案

bento orange.small

8、选择所有盘子和便当(标签)

---

根据元素的类型选择

示例

• div , p => 选择所有的 div 和 p 标签

练习

答案

plate, bento

9、选择所有的元素(通配符)

---

示例

• * => 选择所有的标签

练习

答案

10、选择盘子里的所有(通配符组合)

---

练习

答案

plate *

11、选择盘子旁边的苹果(+)

---

示例

• div + p =>选择所有紧跟在<div>元素之后的第一个<p>元素

练习

答案

plate + apple

12、选择盘子内的苹果(>)

---

根据元素的类型选择

示例

• p > div => 选择所有的p标签内的直系div元素

练习

选择盘子

答案

plate > apple

13、选择盘子内第一个的橘子(first-child)

---

示例

• p:first-child => 指定只有当<p>元素是其父级的第一个子级的样式。

练习

答案

orange: first-child;

14、选择小的的苹果和泡菜

---

根据元素的类型和 class 的组合，利用逗号分割

示例

• a, b => 选择所有的a标签和b标签

• a.red => 选择所有的class=red的a标签

练习

答案

apple.small, pickle.small

15、选择第三个盘子

---

根据元素的顺序选择

示例

• p:nth-child(2) => 选择所有的p且是父级的第二个子元素

练习

答案

plate: nth-child(3);

16、选择盘子中的第一个苹果

---

根据元素的在其父元素的位置选择

示例

• p:first-of-type => 选择每个p元素是其父级的第一个 p 元素

练习

答案

apple.first-of-type

17、选择所有位置是偶数的盘子

---

示例

• p:nth-of-type(odd) => 选择器匹配同类型中的第奇数个同级兄弟元素。

练习

答案

plate: nth-of-type(2n);

plate: nth-of-type(even);

18、选择盘子中唯一的那个苹果

---

示例

• p:only-of-type => 选择每个p元素是其父级的唯一p元素

练习

答案

apple: only-of-type;

19、分别选择苹果和橘子中的最后一个

---

示例

• p:last-of-type => 选择每个p元素是其父级的最后一个 p``元素

练习

答案

orange:last-of-type, apple:last-of-type

20、选择空的便当

---

示例

• p:empty => 选择每个没有任何子级的p元素（包括文本节点）

练习

答案

bento: empty;

21、选择拥有属性 for 的盘子

---

示例

• a[href] => 选择所有带有 href 属性的a元素

练习

框架相关

原生JS虽能实现绝大部分功能，但要么就是过于繁琐，要么就是存在缺陷，故绝大多数开发者都会首选框架开发方案。现阶段较热门是React、Vue两大框架，两者工作原理上存在共通点，也存在一些不同点，对于校招来说，不需要两个框架都学得特别熟，一般面试官会针对你简历中写的框架进行提问。

在框架方面，生命周期、钩子函数、虚拟DOM这些基本知识是必须要掌握的，在学习的过程可以结合框架的官方文档

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

Vue框架

知识要点：
1. vue-cli工程
2. vue核心知识点
3. vue-router
4. vuex
5. http请求
6. UI样式
7. 常用功能
8. MVVM设计模式

React框架

知识要点：
1. 基本知识
2. React 组件
3. React Redux
4. React 路由

有带有 href 属性的a元素

练习

框架相关

原生JS虽能实现绝大部分功能，但要么就是过于繁琐，要么就是存在缺陷，故绝大多数开发者都会首选框架开发方案。现阶段较热门是React、Vue两大框架，两者工作原理上存在共通点，也存在一些不同点，对于校招来说，不需要两个框架都学得特别熟，一般面试官会针对你简历中写的框架进行提问。

在框架方面，生命周期、钩子函数、虚拟DOM这些基本知识是必须要掌握的，在学习的过程可以结合框架的官方文档

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

Vue框架

知识要点：
1. vue-cli工程
2. vue核心知识点
3. vue-router
4. vuex
5. http请求
6. UI样式
7. 常用功能
8. MVVM设计模式

[外链图片转存中…(img-phLLeBKs-1715667720901)]

React框架

知识要点：
1. 基本知识
2. React 组件
3. React Redux
4. React 路由

[外链图片转存中…(img-4Xr2Fqoc-1715667720902)]