Question

我想从同一行中为不同的单词着色。如果我重复这样的线条，那么使用跨度样式将会非常麻烦。有没有更简单的方法？例如：“太阳升起了。”假设我想要'the'，'sun'和'up'为红色，绿色和蓝色。如果我重复这样的造型，它将成为一个繁忙的工作。有更简单的方法吗我正在学习CSS。

Answer 1

使用nth-child选择器。

你仍然需要将你的单词包装在单独的spans中，但这就是我将句子中的不同单词作为模板的目标。

＆＃13;

.foo span:nth-child(1) {
  color: red
}

.foo span:nth-child(2) {
  color: blue
}

.foo span:nth-child(3) {
  color: green
}

＆＃13;

<div class="foo">
  <span>selector 1</span> <span>property 1</span>: <span>value 1</span>
</div>

<div class="foo">
  <span>selector 2</span> <span>property 2</span>: <span>value 2</span>
</div>

<div class="foo">
  <span>selector 3</span> <span>property 3</span>: <span>value 3</span>
</div>

<div class="foo">
  <span>selector 4</span> <span>property 4</span>: <span>value 4</span>
</div>

＆＃13;

如何多次重复跨度样式？

1 个答案: