SCSS中nth-child选择器失效：无法单独设置首个图标背景色

问题出在你当前的选择器逻辑上：.dropdown-item-icon:nth-child(1) 会匹配每个父元素下的第一个子元素，而每个.dropdown-item-icon都是它父元素.dropdown-item的第一个子元素，所以所有图标都会被选中设置红色背景。

要实现每个图标不同背景色，需要先定位到.dropdown容器下的第n个条目，再选中里面的图标元素，以下是修正后的SCSS代码：

.dropdown-item-icon {
  width: 50px;
  height: 50px;
  border-radius: 5px;
}

// 设置第一个图标为红色
.dropdown a:nth-child(1) .dropdown-item-icon {
  background-color: red;
}

// 设置第二个图标为蓝色
.dropdown a:nth-child(2) .dropdown-item-icon {
  background-color: blue;
}

如果你更倾向于通过.dropdown-item来定位，也可以这么写：

.dropdown-item-icon {
  width: 50px;
  height: 50px;
  border-radius: 5px;
}

.dropdown .dropdown-item:nth-child(1) .dropdown-item-icon {
  background-color: red;
}

.dropdown .dropdown-item:nth-child(2) .dropdown-item-icon {
  background-color: blue;
}

核心逻辑是：先找到整个下拉容器里的第n个条目（<a>或.dropdown-item），再精准定位到该条目内的图标，这样就能给每个图标设置独立的背景色了。

内容的提问来源于stack exchange，提问作者TDev