一个高级CSS面试题：在CSS中实现if-else

来源：千锋教育

发布人：qyf

时间： 2022-12-29 17:33:38 1672306418

　　我的一个朋友在最近的一次面试中遇到了一个有趣的 CSS 面试问题。当我第一次看到这个问题时，我认为这是一个常见的CSS问题。然而，经过仔细研究，我发现了这个问题的有趣部分。

　　面试题：请用CSS实现如下效果：

　　页面上有一些数字显示文章阅读的数量。如果数字小于 100，则数字的颜色为灰色。如果数字大于或等于 100，则数字为棕色，而且这种颜色可以动态调整，而不是提前预设。

　　最后面试官要求用纯CSS来解决这个问题，你知道如何达到这个效果吗?

　　题目分析

　　这个问题的本质是什么?

　　这个问题的本质很简单，也就是说，这实际上是一个 if-else 问题。

　　如果我们用伪代码描述这个问题，它应该是这样的：

　　let color;

　　if (reads < 100){

　　color = 'gray'

　　} else {

　　color = 'brown'

　　}

　　所以现在问题变成了：我们如何在 CSS 中实现这个 if-else 逻辑?请记住，CSS 中没有 if-else 关键字之类的东西。

　　在 CSS 中实现 if-else

　　在 CSS 中实现 if-else 的逻辑是本题考查的核心技能。让我们在下面完成这个逻辑。如果你学会了这个技巧，你可以用它来实现许多强大的 CSS 效果。

　　首先，让我们了解一个叫做clamp的函数。

　　clamp() CSS 函数将一个值限制在上限和下限之间。clamp() 允许在定义的最小值和最大值之间的值范围内选择中间值。

　　基本语法格式：

　　clamp(min, var, max)

　　我们可以将clamp函数理解为这样的伪代码：

　　funciton clamp(min, var, max){

　　if(var <= min){

　　return min

　　}

　　if(var >= max){

　　return max

　　}

　　if(var > min && var < max){

　　return var

　　}

　　所以：

　　clamp(10, 13, 20) → 13

　　clamp(10, 2, 20) → 10

　　clamp(10, 30, 20) → 20

　　用法示例：

　　font-size 的值不会超过 20px，也不会低于 10px。

　　这是clamp的基本用法。

　　如果您对clamp仍有疑问，可以参考 MDN 文档。

　　接下来，我们在 CSS 中实现这个功能。

　　result的值根据 var 的值而变化：

　　当 var 的值小于 100 时，结果的值为 10;

　　当 var 的值大于等于 100 时，结果变为 20。

　　如果我们用伪代码描述这个问题，它应该是这样的：

　　let result;

　　if(var < 100){

　　result = 10

　　} else {

　　result = 20

　　}

　　这个要求和clamp函数类似，但又不一样。clamp可以将 var 的值限制在一个范围内，但我们现在希望结果的值是 10 或 20。

　　那我们怎么做?

　　有一个特殊的技巧：我们可以放大 var 的变化，使其值要么达到区间的上限，要么达到区间的下限。

　　于是：

　　let result = clamp(10, (var-99) * 20, 20)

　　这会产生一个效果：

　　· 如果 var 的值为 99，则表达式变为：clamp(10, 0, 20), takes 10.

　　· 如果 var 的值为 100，则变为：clamp(10, 20, 20), takes 20.

　　用一张图解释：

　　同样，如果我们希望：

　　当 var 的值小于 50 时，result的值为 5。

　　当 var 的值大于等于 50 时，result的值为 15。

　　我们只需要这样写：

　　let result = clamp(5, (var-49) * 15, 15)

　　你有没有注意到：这实际上是 if-else 的效果，我们做到了。

　　在 CSS 中切换颜色

　　回到最初的面试问题。

　　为了让我们后面可以使用 CSS 进行变量计算，我们需要将值放在一个 CSS 变量中，所以 HTML 可以这样写：

<num style=<span data-raw-text="" "="" data-textnode-index-1655261252004="96" data-index-1655261252004="1664" class="character" style="margin: 0px; padding: 0px;">"--num:1<span data-raw-text="" "="" data-textnode-index-1655261252004="96" data-index-1655261252004="1672" class="character" style="margin: 0px; padding: 0px;">">1<span>reads</span></num>

<num style=<span data-raw-text="" "="" data-textnode-index-1655261252004="99" data-index-1655261252004="1710" class="character" style="margin: 0px; padding: 0px;">"--num:99<span data-raw-text="" "="" data-textnode-index-1655261252004="99" data-index-1655261252004="1719" class="character" style="margin: 0px; padding: 0px;">">99<span>reads</span></num>

<num style=<span data-raw-text="" "="" data-textnode-index-1655261252004="102" data-index-1655261252004="1758" class="character" style="margin: 0px; padding: 0px;">"--num:102<span data-raw-text="" "="" data-textnode-index-1655261252004="102" data-index-1655261252004="1768" class="character" style="margin: 0px; padding: 0px;">">102<span>reads</span></num>

　　如果我们不需要考虑 HTML 语义或 SEO 因素，这里的“数字”和“读取”都可以由伪元素生成：

<head>

<style>

num::before {

counter-reset: num var(--num);

content: counter(num);

}

num::after {

content: 'reads';

}

</style>

</head>