Html 如何正确地使用：n子元素以单个元素为目标？

因此，我有一个

，其中有五个

标记嵌套在中。我想对它们进行不同的风格设计，并一直在尝试使用

：n个child

，尝试针对每个

元素，而不是添加任何类等

我的

.scss

文件如下所示：

  ul {
    display: inline-block;
    li:nth-child(1) {
      list-style-type: none;
      list-style: none;
      display: inline-block;
      background: blue;
    }
    li:nth-child(2) {
      list-style-type: none;
      list-style: none;
      display: inline-block;
      background: red;
    }
    li:nth-child(3) {
      list-style-type: none;
      list-style: none;
      display: inline-block;
      background: white;
    }
    li:nth-child(4) {
      list-style-type: none;
      list-style: none;
      display: inline-block;
      background: pink;
    }
  }

我只是添加了一些颜色，试图让我的风格更容易改变

---

但是，我并不是针对每个

元素改变颜色，而是只针对少数元素，只显示蓝色。我误解了什么？有什么帮助吗？
您所做的工作正在发挥作用，但是，您首先应该尝试以不同的方式针对您的选择器，例如：

ul{
  li{
    &:nth-child(2){
      /* Your code here */
    }
  }
}

另外，请注意：first child和：last child伪选择器存在

最后，我建议您做的是，如果可能的话，通过编程添加颜色或背景色，因为它似乎比主题约束更具体。而且，如果您不能使用您的服务器来执行此操作，那么可以尝试查看sass列表和@for指令。它可以帮助您拥有一个可维护的代码。
什么是“但只有少数”呢？有什么问题吗？显示呈现的HTML和CSS，而不是SCS。请解释什么不起作用。看起来很好。但对于SCS来说，这是非常重复的。您可能希望对此进行研究。设置基本列表项的样式，然后仅添加单独应用于每个单独列表项的样式。我现在使用的是移动设备，所以无法演示。不过，这是你的问题的第二个问题。谢谢，这起作用了：）不知怎的，这和OP已经有的有什么不同吗？代码编译成同样的东西。它只是一个更干净的解决方案。但这确实是完全相同的css输出。