如何使用：nth-​​child正确定位个别元素？

Question

所以我有一个<ul>，其中嵌有五个<li>个标签。我想以不同的方式设置它们的样式，并且一直在试验:nth-child以尝试定位每个<li> }元素而不是添加任何类等。

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

我只添加了颜色以尝试注意我的样式更改更容易

但是，我不是针对每个<li>元素并更改颜色，而只是改变颜色，只显示蓝色。我误解了什么？有什么帮助吗？

Answer 1

你所做的就是工作，但是，首先应该尝试以不同的方式定位你的选择器，例如：

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

另请注意：存在first-child和：last-child伪选择器。

最后，我建议你做的是，如果可能的话，以编程方式添加颜色或背景颜色，因为它似乎比主题约束更具内容特定性。并且，如果您无法使用服务器执行此操作，可能会尝试查看sass列表和@for指令。它可以帮助您获得可维护的代码。