一道有意思的 CSS 面试题,FizzBuzz ~
作者:chokcoco
来源:SegmentFault 思否社区
FizzBuzz 是一道很有意思的题目。我们来看看题目:
如果遇见了 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 选择器,其实还有几个隐藏的考点:
<li></li> 本身内部是空值,如何赋予内容?
如何填充 li 当前的序号?
counter-increment counter
解题
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";
}

延伸一下
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;
}


最后


关注公众号:拾黑(shiheibook)了解更多
赞助链接:
关注数据与安全,洞悉企业级服务市场:https://www.ijiandao.com/
四季很好,只要有你,文娱排行榜:https://www.yaopaiming.com/
让资讯触达的更精准有趣:https://www.0xu.cn/

随时掌握互联网精彩
- iTrustSSL:不同的SSL证书品牌区别是什么
- 微软计划为新版Outlook添加PST离线数据文件支持
- 某网络安全公司的扩展程序被黑客攻击然后对用户投毒
- 比Java快15倍!国产编程语言MoonBit发布原生后端
- 百度 Comate 代码AI编程助手 - 个人永久免费 / 还可薅羊毛
- 视频|Quest Pro开箱体验&20个问题解答!
- 我国半导体材料产业已取得长足发展,但仍面临两大困境!
- 四大科技巨头呼吁废除闰秒;国内 Gopher 发起新编程语言;Java 7 生命周期结束 | 思否周刊
- 制造业:铸就大国发展引擎
- 智慧物流,到底智慧在哪里?
- 保“链”稳产助企业,全力以赴稳住工业增长——访工业和信息化部副部长辛国斌
- 除了高薪,你学习Java的理由是……
赞助链接