如何通过CSS选择指定元素，实现列表项部分变灰的样式效果？

需求说明 #

所有li默认显示绿色；第一个带有.language类的容器内，ul的最后一个li显示灰色；第二个.language容器内，ul的最后3个li显示灰色。

原代码的问题分析 #

1. 选择器层级错误：原代码中.language ul:first-of-type会选中每个.language容器内的第一个ul，但每个容器里本来就只有一个ul，导致所有容器的最后一个li都会变成灰色，不符合需求。
2. 语法错误：.language ul::nth-of-type(2)使用了双冒号::，而:nth-of-type是伪类，应该用单冒号:；同时这个选择器试图选中每个.language里的第二个ul，但实际每个容器只有一个ul，所以无法匹配到目标元素。
3. 目标选择错误：原代码中li:nth-child(-n+2)是选中前2个li，和需求里的“最后3个li”不符。

正确实现代码 #

CSS代码

.language {
  padding: 20px 0;
}

h4 {
  text-transform: capitalize;
}

ul {
  display: flex;
  align-items: center;
  justify-content: space-between;
  list-style: none;
}

ul li {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background-color: green;
}

/* 第一个.language容器内的ul最后一个li设为灰色 */
.language:first-of-type ul li:last-child {
  background-color: #eee;
}

/* 第二个.language容器内的ul最后3个li设为灰色 */
.language:nth-of-type(2) ul li:nth-last-child(-n+3) {
  background-color: #eee;
}

HTML代码（无需修改）

<div class="language">
  <h4>arabic</h4>
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>
<div class="language">
  <h4>english</h4>
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>

代码说明 #

• .language:first-of-type：选中页面中第一个带有.language类的容器，再定位到其内部的ul的最后一个li。
• .language:nth-of-type(2)：选中页面中第二个带有.language类的容器，li:nth-last-child(-n+3)表示选中从倒数第1个到倒数第3个的li，也就是最后3个列表项。

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