jjzjj

一道有意思的 CSS 面试题，FizzBu​​zz ~

ChokCoco 2023-03-28 原文

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

最后

好了，本文到此结束，希望对你有帮助 ?

更多精彩 CSS 技术文章汇总在我的 Github -- iCSS ，持续更新，欢迎点个 star 订阅收藏。

如果还有什么疑问或者建议，可以多多交流，原创文章，文笔有限，才疏学浅，文中若有不正之处，万望告知。

试题FizzBulicodeCSSHtml/Css

有关一道有意思的 CSS 面试题，FizzBu​​zz ~的更多相关文章

  1. ruby - capybara field.has_css?匹配器 - 2

    我在MiniTest::Spec和Capybara中使用以下规范:find_field('Email').must_have_css('[autofocus]')检查名为“电子邮件”的字段是否具有autofocus属性。doc说如下:has_css?(path,options={})ChecksifagivenCSSselectorisonthepageorcurrentnode.据我了解，字段“Email”是一个节点，因此调用must_have_css绝对有效!我做错了什么？ 最佳答案 通过JonasNicklas得到了答案:No

  2. css - 用 watir 检查标签类？ - 2

    我有一个div，它根据表单是否正确提交而改变。我想知道是否可以检查类的特定元素？开始元素看起来像这样。如果输入不正确，添加错误类。 最佳答案 试试这个:browser.div(:id=>"myerrortest").class_name更多信息:http://watir.github.com/watir-webdriver/doc/Watir/HTMLElement.html#class_name-instance_method另一种选择是只查看具有您期望的类的div是否存在browser.div((:id=>"myerrortes

  3. Hive SQL 五大经典面试题 - 2

    目录第1题连续问题分析：解法：第2题分组问题分析：解法：第3题间隔连续问题分析：解法：第4题打折日期交叉问题分析：解法：第5题同时在线问题分析：解法：第1题连续问题如下数据为蚂蚁森林中用户领取的减少碳排放量iddtlowcarbon10012021-12-1212310022021-12-124510012021-12-134310012021-12-134510012021-12-132310022021-12-144510012021-12-1423010022021-12-154510012021-12-1523.......找出连续3天及以上减少碳排放量在100以上的用户分析：遇到这类

  4. ruby -::在 Ruby 语法中是什么意思？ - 2

    这个问题在这里已经有了答案:WhatisRuby'sdouble-colon`::`?(12个答案)关闭8年前。什么是::？@song||=::TwelveDaysSong.new

  5. ruby - __FILE__ == $PROGRAM_NAME 在 ruby​​ 中是什么意思？ - 2

    这个问题在这里已经有了答案:Whatdoes`if__FILE__==$0`meaninRuby(6个答案)关闭6年前。我在审查Ruby代码时偶然发现了这个语法。代码是:if__FILE__==$PROGRAM_NAME#somecode...end我想__FILE__是一个变量，可以让我获取我所在文件的名称？但是$PROGRAM_NAME简化了什么？另外，为什么这个if语句是必需的，因为程序可以使用或不使用它？

  6. ruby-on-rails - 没有参数的 `<<`(小于两倍)是什么意思？ - 2

    我在一个我想在formtasticGem中覆盖的方法中找到了这个。该方法如下所示:defto_htmlinput_wrappingdohidden_field_html是什么意思？在第三行做什么？我知道它对数组有什么作用，但在这里我不知道。 最佳答案 你可以这样读:hidden_field_htmllabel_with_nested_checkbox是连接到hidden_​​field_html末尾的参数-为了“清晰”，他们将其分成两行 关于ruby-on-rails-没有参数的`

  7. ruby - Ruby 的 AST 中的 'send' 关键字是什么意思？ - 2

    我正在尝试学习Ruby词法分析器和解析器(whitequarkparser)以了解更多有关从Ruby脚本进一步生成机器代码的过程。在解析以下Ruby代码字符串时。defadd(a,b)returna+bendputsadd1,2它导致以下S表达式符号。s(:begin,s(:def,:add,s(:args,s(:arg,:a),s(:arg,:b)),s(:return,s(:send,s(:lvar,:a),:+,s(:lvar,:b)))),s(:send,nil,:puts,s(:send,nil,:add,s(:int,1),s(:int,3))))任何人都可以向我解释生成的

  8. ruby - Ruby 的 printf 参数是什么意思？ - 2

    谁能帮我理解下面的表达方式？printf("%3d-%s\n",counter,name)该行打印类似这样的内容6-安装Adob​​e软件我查阅了资料并阅读了引用资料，但找不到简单的答案，我有点困惑。如果你能给我一个好的引用，请这样做。%3d好的，根据我的理解，%3d是字符数或空格数。请指出解释它的引用资料。%s\n我不知道这是做什么的。我猜\n是一个换行符或类似的东西，但通过查看输出，它似乎并不像那样工作。为什么counter和name变量用逗号分隔？通过查看输出，似乎%3d被替换为counter而%s\n被替换为名称。我不确定它是如何工作的，但我想了解它。

  9. ruby - ruby 中 * 和 flatten 的意思是什么 - 2

    我是ruby​​语言的新手，所以当我尝试按值对哈希进行排序时我用这个方法排序:movie_popularity.sort_by{|m,p|p}.reverse但是sort方法返回一个数组，而我需要返回一个散列，所以我使用了这个命令:movie_popularity=Hash[*movie_popularity.sort_by{|m,p|p}.reverse.flatten]我的问题是上面一行中的*和flatten是什么意思？谢谢=) 最佳答案 *被称为“splat运算符”；我不确定我能否给你技术上的定义(虽然我相信你会在谷歌的帮助下

  10. ruby-on-rails - Assets 管道损坏 : Not compiling on the fly css and js files - 2

    我开始了一个新的Rails3.2.5项目，Assets管道不再工作了。CSS和Javascript文件不再编译。这是尝试生成Assets时日志的输出:StartedGET"/assets/application.css?body=1"for127.0.0.1at2012-06-1623:59:11-0700Servedasset/application.css-200OK(0ms)[2012-06-1623:59:11]ERRORNoMethodError:undefinedmethod`each'fornil:NilClass/Users/greg/.rbenv/versions/1

随机推荐