假设我有一个p元素或div元素,文本说大约10-15行,现在我的客户端对此有一个奇怪的调用,他需要具有不同文本颜色的奇数/偶数行.比较第1行 – 黑色,因此第2行应为灰色,第3行应为黑色,依此类推……
所以我决定使用span并改变颜色但是变量分辨率在这里杀死了东西,我知道：第一行选择器(在这种情况下不会有用),还有选择器,如：odd& ：甚至将在这里排除因为我没有使用表格,所以有什么办法可以用CSS实现这个或者我需要使用jQuery吗？
TL; DR : I want to target odd/even lines in a paragraph or a div
我需要一个CSS解决方案,如果没有,欢迎使用jQuery和JavaScript
最佳答案
演示1
原文链接：https://www.f2er.com/css/427585.html一个相当丑陋的小解决方案,因为它是凌晨3:30.它仍然适用于纯文本块,并允许每行单独设置样式.
小提琴：http://jsfiddle.net/Fptq2/2/
Chrome 26,FF 20,Safari 5.1.7,IE 8/9/10(7可能可以使用)
基本上它：
>将源拆分为单个单词一次
>包裹跨度中的每个单词(丑陋但有效 – 任何样式现在都可以应用于跨度)
>使用简单的位置计算来确定元素是否低于之前的元素
>根据索引更改更改颜色
>调整大小时执行#3-5(这绝对应该受到限制！)
$(".stripe").each(function(){
var obj = $(this);
var html = obj.html().replace(/(\S+\s*)/g,"演示2
小提琴：http://jsfiddle.net/Fptq2/4/
>使用更大的文本块
>显示应用于多个元素的效果
>缓存“所有跨度”选择器
>添加调整大小限制
(function () {
$(".stripe").each(function () {
var obj = $(this);
var html = obj.html().replace(/(\S+\s*)/g,"产量
