Question

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

Answer 1

首先。这不是很好的CSS。 {和li:nth-child()之间的第一个.icon和最后的}不需要。正确的CSS表单为li:nth-child() .icon { }

其次，image1，image2，image3是什么？那也不是标准的css

少用即可完成以下操作

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')
  }  
}

我知道这不一定简化了css，但是给我更多关于html结构的信息，我可以帮助你更多

Answer 2

我从未使用过Less，但是我使用了sass，你可以使用循环。

您应该阅读this page

如果我没错，那么代码就越少（不能尝试，因为我使用sass）：

GitHub access token

我想用LESS简化那些CSS，怎么样？

2 个答案: