乐趣区

关于前端:一道有意思的-CSS-面试题FizzBu​​zz

jiezi

FizzBu​​zz 是一道很有意思的题目。咱们来看看题目：

如果遇见了 3 的倍数要说 Fizz，5 的倍数就说 Buzz，如果既是 3 的倍数又是 5 的倍数就说 FizzBuzz。

如果是在一些编程语言中，这是一道比拟高级的题目，当然，略微转换一下，咱们就能够把它转换成一道无关 CSS 选择器的题目。

假如咱们有如下构造：

<ul>
    <li></li>
    <li></li>
    <li></li>
    // ... 很多个 li
    <li></li>
    <li></li>
</ul>

通过 CSS 选择器，实现当 li 的序号为 3 的倍数时，li 输入 Fizz，5 的倍数就说 Buzz，如果既是 3 的倍数又是 5 的倍数就输入 FizzBuzz。当然，如果不满足上述 3 个条件，须要输入以后的序号。

要求的成果如下：

简略剖析题目

这里题目看似考查 CSS 选择器，其实还有几个暗藏的考点：

  1. <li></li> 自身外部是空值，如何赋予内容？

这里的第一个考点就是 CSS 伪元素 ，CSS 中能够通过伪元素的 content 属性，填充文本内容。

  1. 如何填充 li 以后的序号？

第二个考点就是如何填充以后 li 的 index 序号？通过选择器找到对应的 3、5、15 的倍数绝对简略，那面对剩下的不满足规定的 li，它的序号应该如何填充呢？

这里须要使用到 CSS 计数器，也就是如下两个属性：

  • counter-increment
  • counter

属性用于将 CSS Counters 的值减少给定值。利用它能够实现 CSS 外部的一个计数器。

解题

简略剖析之后，解题就比较简单了，间接上代码：

li {
    list-style-type: unset;
    counter-increment: fizzbuzz;
}
li::before {content: counter(fizzbuzz);
}
li:nth-child(3n)::before {content: "fizz";}
li:nth-child(5n)::before {content: "buzz";}
li:nth-child(15n)::before {content: "fizzbuzz";}

如果不满足 fizzbuzz 规定的，应用 CSS 计数器填充 content 内容 content: counter(fizzbuzz)，满足规定的则应用对应的字符串填充 content。

后果如下：

CodePen Demo — CSS FizzBuzz 1

延长一下

当然，这个 FizzBuzz 还能够用于创立一些有意思的布局。咱们利用 FizzBuzz 的布局，构建一幅有意思的网格图片：

li {
    width: 40px;
    height: 40px;
    background: lightskyblue;
}
li:nth-child(3n) {background-color: azure;}
li:nth-child(5n) {background-color: peachpuff;}
li:nth-child(15n) {background-color: dodgerblue;}

它能够用于生成一些有意思的背景网格图：

放大了看，甚至带有一些视觉上的错位的感觉。当然，扭转盒子的宽度，成果也是不停地在变动：

CodePen Demo — CSS FizzBuzz Grid

最初

好了，本文到此结束，心愿对你有帮忙 :)

如果还有什么疑难或者倡议，能够多多交换，原创文章，文笔无限，满腹经纶，文中若有不正之处，万望告知。

本文参加了 SegmentFault 思否征文「如何“反杀”面试官？」，欢送正在浏览的你也退出。

退出移动版