前端CSS_标准下的隔行换色方法

firefox前端开发插件 前端开发常用谷歌插件 前端插件如何开发

以下是引用片段：
<ul>
<li class=”one”></li>
<li class=”two”></li>
<li class=”one”></li>
<li class=”two”></li>
</ul>
我们看到上面的代码所表现出来的是每行的CLASS都不一样，通过这样的方式的确可以解决隔行换色的问题，但是都被程序员告知这样写法程序没办法写。
这种设想在网页标准研究联盟中得到了反驳，认为样式的事没必要用行为去实现，并且用js来实现的效果并不一定有css来解决的好。但这种效果实践后发现，可以用大背景实现。什么叫大景实现呢，意思就是说通过在父级设定背景从而使得当前级得到隔行换色或是隔N行换N色。

上图是一个实例应用，大家可以看到采用的是两行背景重复。而这个背景图是定义在UL上的而不定义在LI上。这样又使得我们少写一点代码，让代码显得更加的 干净。同时这样技巧通过举一反三的思考就能做出更多很好玩的样式来，比如我们让每一行都不一样，或是让每一行都像是纸页脚卷起来一样，或是其它的什么花 样，那就要看你能想出什么样的花招来了!

前端开发vscode 插件 前端开发谷歌常用插件 免开发前端插件