FizzBuzz是一道很有意思的题目。我们来看看题目：
如果遇见了3的倍数要说Fizz，5的倍数就说Buzz，如果既是3的倍数又是5的倍数就说FizzBuzz。
如果是在一些编程语言中，这是一道比较初级的题目，当然，稍微转换一下，我们就可以把它转换成一道有关CSS选择器的题目。
假设我们有如下结构：
ulli/lili/lili/li//...很多个lili/lili/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-incrementcounter属性用于将CSSCounters[1]的值增加给定值。利用它可以实现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。
结果如下：
CodePenDemo--CSSFizzBuzz1[2]
延伸一下当然，这个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;}
它可以用于生成一些有意思的背景网格图：
放大了看，甚至带有一些视觉上的错位的感觉。当然，改变盒子的宽度，效果也是不停地在变化：
CodePenDemo--CSSFizzBuzzGrid[3]
最后好了，本文到此结束，希望对你有帮助:)
想Get到最有意思的CSS资讯，千万不要错过我的