Question

我的目的是显示5个问题。第一个是最简单的，最后一个是最难的。我想为每个li标签改变大约10％的颜色。是posiple使用CSS还是LESS。如果有，怎么样？谢谢大家

Answer 1

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

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

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

LESS

 @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%);
    }

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

<强> LESS

.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;
}

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

4 个答案: