我想通过使用更少的CSS来简化这些CSS，怎么做？

首先。那可不好。第一个

{

介于

li:n-child（）

和

之间。图标

和最后一个

}

是不需要的。正确的CSS格式应该是

li:nth-child（）.icon{}

其次，什么是

image1

，

image2

，

image3

？这也不是标准的css

用更少的钱，你可以做以下事情

li:nth-child(1){
      .icon{
        background: url('ico_1.png')  no-repeat;`image1`
      }
     }

li:nth-child(2){
      .icon{
        background: url('ico_2.png')  no-repeat;`image2`
      }
     }

li:nth-child(3){
      .icon{
        background: url('ico_3.png')  no-repeat;`image3`
      }
     }

---

我知道这不一定会简化css，但给我更多关于html结构的信息，我可能会帮助你更多我从未少用过，但我使用sass，你可以使用循环

你应该读书

如果我没有错的话，更少的代码应该是这样的（我使用sass时无法尝试）：

。生成图标（3）；
.在（@i=<@n）时生成图标（@n，@i:1）{
第n个子（@{i}）.icon{
背景图像：url（'ico_@{i}.png'））
}
.生成图标（@n，（@i+1））；
}

对不起，伙计，也许我没说清楚。我想要的只是一个循环，我想要用一个循环器来完成它。我关心的不是结构，而是循环。你能解决吗？首先，胡特。第二，你到底想要什么？看。谢谢，老兄，你帮了我很多。你是真正的MVP！我很高兴能帮上忙；）

li  {
  .icon {
     background-repeat:no-repeat;
     /* all background common styles here */
  }
 $:first-child .icon {
     background-image:url('ico_1.png')
  }  
 $:nth-child(2) .icon {
     background-image:url('ico_2.png')
  }  
 $:nth-child(3) .icon {
     background-image:url('ico_3.png')
  }  
}

.generate-icons(3);

.generate-icons(@n, @i: 1) when (@i =< @n) {
  li:nth-child(@{i}) .icon {
    background-image:url('ico_@{i}.png')
  }
  .generate-icons(@n, (@i + 1));
}