前言
在前端面试中，CSS是一个非常重要的考察点，因为它是构建网页界面和用户交互的关键技术之一。年也算过完了，又到了春招的时候，这是一个检验成果的阶段，接下来我会陆续分享一下我在面试时所遇到的与CSS有关的问题。
css中的选择器有哪些？ 说说优先级
- id选择器
- 类名选择器
- 标签选择器
- 后代选择器
- 子级选择器
- 相邻兄弟选择器
- 群组选择器
前三个选择器我相信大家都已经很熟悉了，我来给大家介绍一下后面四个选择器
后代选择器
style{ #app div{ border: 2px solid red; } } <div id="app"> <div class="box1"> <div class="title"> <h2>这是标题</h2> </div> </div> </div>
如上述代码，后代选择器就是对#app里面所有的div标签添加样式
子级选择器
#app > div{ border: 2px solid red; }
子级选择器只对#app里的第一个容器添加样式，也就是它的儿子，这里是box1。
相邻兄弟选择器
相邻兄弟选择器是CSS中的一种选择器，用于选择紧接在另一个元素后面的兄弟元素。它的语法是使用加号 (+) 符号来连接两个选择器。
语法格式如下：
selector1 + selector2 { /* styles */ }
在这个语法中，selector1 和 selector2 是两个选择器，加号 (+) 表示选择紧接在 selector1 元素后面的第一个 selector2 元素。
例如，如果我们有以下HTML结构：
<div class="first"></div> <div class="second"></div>
如果我们想选择紧接在 class 为 "first" 的 div 元素后面的 class 为 "second" 的 div 元素，我们可以使用相邻兄弟选择器：
.first + .second { /* styles */ }
上述CSS规则将仅应用于紧接在 class 为 "first" 的 div 元素后面的 class 为 "second" 的 div 元素，而不会影响其他 "second" 类型的元素。
群组选择器
<div class="box1"></div> <p class="box2"></p> <a class="box3"></a>
如果我们想为这三个元素类型同时应用相同的样式，我们可以使用群组选择器：
.box1, .box2, .box3 { background-color: lightblue; padding: 10px; border: 1px solid darkblue; }
上述则将同时为 class 为 "box1"、"box2" 和 "box3" 的元素应用相同的背景颜色、内边距和边框样式。
优先级
!important > 内联 > id选择器 > 类名选择器 > 标签选择器
内联就是将样式写在标签中，如<div class = "box" style = "">
说说css中的单位有哪些
- px（像素） ：
- px是最常用的长度单位之一，它表示屏幕上的一个像素点。
- 在Web开发中，1px等于显示器上的一个物理像素，它是绝对单位，不受其他因素影响。
- rem（根元素的字体大小） ：
- rem是相对于根元素（html元素）的字体大小的单位。
- 当设置根元素的字体大小时，所有使用rem单位的元素将相对于根元素的字体大小进行调整。
- rem单位特别适用于实现整体的字体大小和布局的一致性。
- em（父元素的字体大小） ：
- em是相对长度单位，它相对于父元素的字体大小。
- 当应用于字体大小时，1em等于父元素的字体大小。当应用于其他属性时，1em等于当前元素的字体大小。
- em单位经常用于调整相对于父元素的尺寸，特别是在设计响应式布局时。
- vw/vh（视窗宽度/视窗高度） ：
- vw和vh是相对于视口宽度和视口高度的单位，视口是浏览器窗口的可见部分。
- 1vw等于视口宽度的1%，1vh等于视口高度的1%。
- vw和vh单位常用于创建响应式设计和布局，使元素相对于视口的大小和比例进行调整。
- %（百分比） ：
- 百分比单位是相对于父元素的特定属性的值来计算的。
- 例如，设置宽度为50%的元素将占据其父元素宽度的一半。
- 百分比单位常用于创建灵活的布局，使元素根据父元素的大小自适应调整。
