换行符上的文本颜色变化？

Question

我想创建一个列表，其中下一行文本颜色会发生变化，然后在下一行恢复为以前的颜色。

在询问之前，我已经四处寻找答案，但一无所获。我有一个经常更改的简单 html 文本列表（不是表格）。跨度标签可以工作，但在一个大列表中，插入新行需要移动所有跨度标签。

有没有办法让这种情况发生在换行符上，比如 div 类的 css 样式？

这是列表的样式

   <p style="font-family:arial; etc; etc">
   <br>blah blah
   <br>blah blah
   <br>blah etc</p>

Answer 1

您可以使用 CSS 来捕获列表的备用子项

li { color: green; }
li:nth-child(odd) { color: red; }

<ul>
    <li>Link 1</a></li>
    <li>Link 2</a></li>
    <li>Link 3</a></li>
    <li>Link 4</a></li>
    <li>Link 5</a></li>
</ul>

Answer 2

如果您使用的是实际列表，那么我推荐 @Tushar Gupta 的选项。

如果您使用纯文本，则没有特定的 CSS 选择器可以确定换行符（实际的 <br/> 标签除外）。

您可以做的就是使用重复的线性渐变来伪造它，并在已知行高处使用合适的色标。

这将改变每一行的背景（你的后备），但如果浏览器支持...

-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

...它将“改变”文本颜色。

Reference Article @ CSS-Tricks.com

.stripey {
  width: 50%;
  margin: 25px auto;
  padding: .25rem;
  border: 1px solid red;
  line-height: 1.25rem; /* same as color stop increments */
}
.stripey p {
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: repeating-linear-gradient(
    to bottom, 
    blue, 
    blue 1.25rem, 
    red 1.25rem, 
    red 2.5rem
  );
}

<div class="stripey">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione laboriosam dignissimos, eligendi consequatur, suscipit ipsa excepturi eaque, placeat dicta animi voluptas libero nemo corporis deserunt quod hic repellat, consectetur dolorum saepe neque
    quam fugiat temporibus rem minus? Mollitia expedita assumenda maxime. Debitis fugiat nam quam quibusdam, suscipit cupiditate! Ab, totam.</p>
</div>