likes
comments
collection
share

分享一些我在面试时所遇到的CSS问题 （二）

作者站长头像
站长
· 阅读数 7

前言

在前端面试中，CSS是一个非常重要的考察点，因为它是构建网页界面和用户交互的关键技术之一。年也算过完了，又到了春招的时候，这是一个检验成果的阶段，接下来我会陆续分享一下我在面试时所遇到的与CSS有关的问题。祝大家在接下来的春招中取得一个好成绩！

css中的选择器有哪些？ 说说优先级

  1. id选择器
  2. 类名选择器
  3. 标签选择器
  4. 后代选择器
  5. 子级选择器
  6. 相邻兄弟选择器
  7. 群组选择器

前三个选择器我相信大家都已经很熟悉了，我来给大家介绍一下后面四个选择器

后代选择器

    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中的单位有哪些

  1. px（像素） ：

    • px是最常用的长度单位之一，它表示屏幕上的一个像素点。
    • 在Web开发中，1px等于显示器上的一个物理像素，它是绝对单位，不受其他因素影响。

  2. rem（根元素的字体大小） ：

    • rem是相对于根元素（html元素）的字体大小的单位。
    • 当设置根元素的字体大小时，所有使用rem单位的元素将相对于根元素的字体大小进行调整。
    • rem单位特别适用于实现整体的字体大小和布局的一致性。

  3. em（父元素的字体大小） ：

    • em是相对长度单位，它相对于父元素的字体大小。
    • 当应用于字体大小时，1em等于父元素的字体大小。当应用于其他属性时，1em等于当前元素的字体大小。
    • em单位经常用于调整相对于父元素的尺寸，特别是在设计响应式布局时。

  4. vw/vh（视窗宽度/视窗高度） ：

    • vw和vh是相对于视口宽度和视口高度的单位，视口是浏览器窗口的可见部分。
    • 1vw等于视口宽度的1%，1vh等于视口高度的1%。
    • vw和vh单位常用于创建响应式设计和布局，使元素相对于视口的大小和比例进行调整。

  5. %（百分比） ：

    • 百分比单位是相对于父元素的特定属性的值来计算的。
    • 例如，设置宽度为50%的元素将占据其父元素宽度的一半。
    • 百分比单位常用于创建灵活的布局，使元素根据父元素的大小自适应调整。

祝大家在接下来的春招中取得一个好成绩！

假如您也和我一样，在准备春招。欢迎加我微信shunwuyu，这里有几十位一心去大厂的友友可以相互鼓励，分享信息，模拟面试，共读源码，齐刷算法，手撕面经。来吧，友友们！”