CSS：如何在 li 标签示例中使颜色变深，第一个 li 颜色为橙色，最后一个 li 颜色为红色答案

【问题标题】：CSS: How to darker color in li tag example first li color orange and last li color redCSS：如何在 li 标签示例中使颜色变深，第一个 li 颜色为橙色，最后一个 li 颜色为红色
【发布时间】：2016-07-14 06:58:16
【问题描述】：

我的目的是显示 5 个问题。第一个是最简单的，最后一个是最难的。我想为每个 li 标签更改大约 10% 的颜色。使用 CSS 或 LESS 是否可行。如果是怎么办？谢谢大家

【问题讨论】：

标签： css colors less html-lists

【解决方案1】：

只需为他们分配一个从问题 1 class = 'easy1' 到 5 class = 'easy5' 的类，并在 css 中定义它们。

【讨论】：

【解决方案2】：

这就是你要找的东西？

.q1 {
   background:rgba(0,0,0,0.1) 
}

.q2 {
   background:rgba(0,0,0,0.2) 
}

.q3 {
   background:rgba(0,0,0,0.3) 
}

.q4 {
   background:rgba(0,0,0,0.4) 
}

.q5 {
   background:rgba(0,0,0,0.5) 
}

<ul>
  <li class="q1">Question 1</li>
  <li class="q2">Question 2</li>
  <li class="q3">Question 3</li>
  <li class="q4">Question 4</li>
  <li class="q5">Question 5</li>
 </ul>

【讨论】：

【解决方案3】：

好的，我用更少的东西解决了

html

<a href="#"> <li class="q1">1. The partners enjoy cool</li> </a>
 <a href="#"> <li class="q2">2. The partners enjoy cool</li></a>
 <a href="#"> <li class="q3">3. The partners enjoy cool</li></a>
 <a href="#"> <li class="q4">4. The partners enjoy cool</li></a>
 <a href="#"> <li class="q5">5. The partners enjoy cool</li></a>

少

 @color:orange;
    .q1{
        background-color: @color;
    }
    .q2{
        background-color:darken(@color,5%);
    }
    .q3{
        background-color:darken(@color,10%);
    }
    .q4{
        background-color:darken(@color,15%);
    }
    .q5{
        background-color:darken(@color,20%);
    }

【讨论】：

【解决方案4】：

您可以在 LESS 中进行循环并从橙色变为红色，您可以使用 spin 而不是 darken：

HTML

<ul>
  <li class="difficulty-1">element 1</li>
  <li class="difficulty-2">element 2</li>
  <li class="difficulty-3">element 3</li>
  <li class="difficulty-4">element 4</li>
  <li class="difficulty-5">element 0</li>
</ul>

少

.elements(5);

@color:orange;
.elements(@n, @i: 1) when (@i =< @n) {

  .difficulty-@{i} {
    color: spin(@color,(@i - 1)*-10%);
  }
  .elements(@n, (@i + 1));
}

输出 CSS

.difficulty-1 {
  color: #ffa500;
}
.difficulty-2 {
  color: #ff7b00;
}
.difficulty-3 {
  color: #ff5000;
}
.difficulty-4 {
  color: #ff2600;
}
.difficulty-5 {
  color: #ff0005;
}

【讨论】：