一道有意思的 CSS 面试题,FizzBuzz ~
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>
本身内部是空值,如何赋予内容?
这里的第一个考点就是CSS 伪元素,CSS 中可以通过伪元素的 content
属性,填充文本内容。
- 如何填充 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
最后
好了,本文到此结束,希望对你有帮助
更多精彩 CSS 技术文章汇总在我的 Github -- iCSS ,持续更新,欢迎点个 star 订阅收藏。
如果还有什么疑问或者建议,可以多多交流,原创文章,文笔有限,才疏学浅,文中若有不正之处,万望告知。
一道有意思的 CSS 面试题,FizzBuzz ~的更多相关文章
- 一道灵活的css笔试题
今天在网上看到一css笔试题,乍一看很简单,实则内部暗藏玄机,题目大概是:九宫格,每格长宽50px,边框宽度5px,鼠标经过边框变红,效果如下: 鼠标路过时: 以下是代码(如有不足之处望多加指正) & ...
- 两道超有意思的 CSS 面试题,试试你的基础
今天在论坛,有看到这样一道非常有意思的题目,简单的代码如下: <div> <p id="a">First Paragraph</p> </ ...
- 一道有意思的多线程面试题 C# 代码实现
如果你对多线程的控制不怎么了解,那么理解了这篇文章的内容也许对你有帮助.鼓励先自己动手实现一遍,做不出来在看代码. 题目一:两个线程交替打印0~100的奇偶数 这道题就是说有两个线程,一个名为偶数线程 ...
- 前端Html和Css面试题
前端Html和Css面试题Html篇:1.你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? IE: trident内核 Firefox:gecko内核 Safari:webkit内核 Ope ...
- css 题目笔记(本文收集了一些个人觉得比较有意思的css题目,欢迎大家给出自己的解答)
1.本文收集了一些个人觉得比较有意思的css题目,欢迎大家给出自己的解答 P标签的最大宽度不可以大于H2标签文字宽度的10% 这里应该是P标签的最大宽度由前面的匿名内联元素宽度(就是大字号文字宽度)决 ...
- 一个有意思的CSS样式库--BUTTONS
我最近发现了一个有意思的CSS样式库,和Bootstrap相似,但是它是专门的一个高度可定制的,免费的并且开源的按钮CSS样式库,这里附上它的网址:http://www.bootcss.com/p/b ...
- 一道关于String的面试题,新鲜出炉,刚被坑过,趁热!!
很多人都会答错的一道关于String的题目,究竟有什么难度? 我们一起来看一道关于String的面试题,准确说是改编的面试题! 准备好啦?在放大招之前先来一个小招式 String s1 = new S ...
- 2019前端面试系列——CSS面试题
盒模型 /* 红色区域的大小是多少?200 - 20*2 - 20*2 = 120 */ .box { width: 200px; height: 200px; padding: 20px; marg ...
- 记录一道有意思的js题目
偶然机会,在codewars上面开始做题,遇到一道有意思的题目,记录一下: 题目是这样的: In this kata, you will write a function that returns t ...
随机推荐
- Solution -「AGC 019F」「AT 2705」Yes or No
\(\mathcal{Description}\) Link. 有 \(n+m\) 个问题,其中 \(n\) 个答案为 yes,\(m\) 个答案为 no.每次你需要回答一个问题,然后得知这个 ...
- 有个姑娘叫history
文章目录 常用参数 history的一些用法 修改history命令默认保存的数量 来给history穿衣服 让我们重新认识一下history history命令用于显示用户以前执行过的历史命令,并且 ...
- kubernetes集群之Pod说能不能让我体面的消亡呀?
kubernetes集群之Pod说能不能让我体面的消亡呀? 由于 Pod 所代表的是在集群中节点上运行的进程,当不再需要这些进程时允许其体面地终止. 1.如果 preStop 回调所需要的时间长于默认 ...
- [题解]UVA11029 Leading and Trailing
链接:http://vjudge.net/problem/viewProblem.action?id=19597 描述:求n^k的前三位数字和后三位数字 思路:题目要解决两个问题.后三位数字可以一边求 ...
- RFC3918聚合组播吞吐量测试——网络测试仪实操
一.简介 1.RFC3918简介 历史 · 在1999年3月成为正式标准 功能 · 评测网络互连设备或网络系统的性能 · 网络设备: 交换机,路由器- 内容 · 定义了一整套测试方法,为不同厂家的设备 ...
- BGP4+协议测试——信而泰网络测试仪实操
文章关键词 BGP4+协议:路由协议:协议测试: 一.前言: 为了有效管理高速发展的互联网,而将其划分为多个相对独立的网格,称为自治域(AS).AS之间通过外部网关协议(EGP)来交换网路可达性信息, ...
- 📚 选择排序和插入排序区别-DS笔记
选择排序法 A[i...n)未排序,A[0...i)已排序 A[i...n]中最小值要放到A[i]的位置 复杂度 \(O(n^2)\) 第一层循环n次 第二层循环:i=0,n次:i=1,n-1次... ...
- Consul学习笔记(详细)
常见的注册中心: Netflix Eureka Alibaba Nacos HashiCorp Consul Apache Zookeeper CoreOS Etcd CNCF CoreDNS 介绍 ...
- JavaWeb-前端基础
前端基础 前端:我们网站的页面,包括网站的样式.图片.视频等一切用户可见的内容都是前端的内容. 后端:处理网站的所有数据来源,比如我们之前从数据库中查询数据,而我们查询的数据经过处理最终会被展示到前端 ...
- 进程&线程(二):Thread相关方法与属性
学习自:python进程.线程.协程 - 张岩林 - 博客园 1.threading.Thread Thread方法 方法(使用方法为Thread.xxx) 说明 start() 激活线程 getNa ...