2024年最新【建议收藏】万字整理，一篇文章帮你掌握 Css 选择器(4)，阿里的面试官

文末

逆水行舟不进则退，所以大家要有危机意识。

同样是干到35岁，普通人写业务代码划水，榜样们深度学习拓宽视野晋升管理。

这也是为什么大家都说35岁是程序员的门槛，很多人迈不过去，其实各行各业都是这样都会有个坎，公司永远都缺的高级人才，只用这样才能在大风大浪过后，依然闪耀不被公司淘汰不被社会淘汰。

为了帮助大家更好温习重点知识、更高效的准备面试，特别整理了《前端工程师核心知识笔记》电子稿文件。

内容包括html，css，JavaScript，ES6，计算机网络，浏览器，工程化，模块化，Node.js，框架，数据结构，性能优化，项目等等。

269页《前端大厂面试宝典》

包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。

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

前端面试题汇总

答案

.small

6、选择小橘子(标签+class)

---

根据元素的类型+class选择

示例

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

练习

答案

orange.small

7、选择便当中的小橘子(组合)

---

根据元素的类型+class组合

示例

• div p.red => div 中的 class=red 的 p 标签

练习

选择盘子

答案

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元素

练习

答案

最后

总的来说，面试官要是考察思路就会从你实际做过的项目入手，考察你实际编码能力，就会让你在电脑敲代码，看你用什么编辑器、插件、编码习惯等。所以我们在回答面试官问题时，有一个清晰的逻辑思路，清楚知道自己在和面试官说项目说技术时的话就好了

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

答案

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

plate: nth-of-type(even);

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

---

示例

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

练习

答案

最后

总的来说，面试官要是考察思路就会从你实际做过的项目入手，考察你实际编码能力，就会让你在电脑敲代码，看你用什么编辑器、插件、编码习惯等。所以我们在回答面试官问题时，有一个清晰的逻辑思路，清楚知道自己在和面试官说项目说技术时的话就好了

[外链图片转存中…(img-sZYgJyAb-1715721330065)]

[外链图片转存中…(img-QZs1xhKd-1715721330066)]

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