Question

我想制作一个列表，其中下一行将有文本颜色更改，然后恢复到下一行的上一个颜色。

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

是否有解决方案可以在换行符（例如css样式的div类）上实现此目的？

这是列表的样式

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

Answer 1

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

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>

备用换行符上的文字颜色变化？

2 个答案: