一道有意思的 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/
关注网络尖刀微信公众号
随时掌握互联网精彩
随时掌握互联网精彩
- 加币兑换人民币汇率2024年1月29日
- 欧元人民币汇率2023年12月12日
- 日元对人民币汇率2023年6月13日
- ChatGPT没出现在中国是因为差钱?
- ChatGPT 被曝曾雇佣数据标注“血汗工厂” ;谷歌企业文化遭前员工痛批:没有使命感 官僚主义严重 |思否周刊
- 美元兑换人民币汇率2023年1月27日
- 1-11月,我国进口集成电路产品个数减少14.4%,价值增长0.6%
- 社区精选 | 自定义计数器小技巧!CSS 实现长按点赞累加动画
- CirroData-TimeS时序数据库的文件存储格式
- “男男CP”时代走向终结
- 折叠屏手机迎来新突破,UTG成升级必选项
- 微信测试新功能,大伙想要的“盖楼”来了
赞助链接