一道有意思的 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/
关注网络尖刀微信公众号
随时掌握互联网精彩
随时掌握互联网精彩
- 十年前受追捧的HiFi手机又“杀”回来了?
- 欧元人民币汇率2024年3月25日
- 加元兑换人民币汇率2023年6月12日
- 高管内讧、IPO成谜,医联难上市
- 睿心分数将搭载至飞利浦神飞云5.0智能诊疗生态平台,合力共创心血管疾病诊疗高质量发展
- 点击领取你的企业“绿马通行证”
- 【杂谈快报】亚马逊明年停止中国Kindle电子书店运营,符合条件用户可申请退货
- 【周末荐书】逃不开的大势:下一个10年的商业与投资机会
- 新东方的学生少了,去留学的人却多了 | 热点关注
- 拜登制定“数字军团”计划,招募和培训在联邦政府任职的数字技术人员
- 苹果付费订阅用户超7亿;消息称哈啰出行计划撤回赴美上市申请;华为免去苏菁智能驾驶产品部部长职务|Do早报
- PostgreSQL 实现定时任务的 4 种方法
赞助链接