如何去除CSS中nav-item重复代码且保留首个元素的特殊样式

当然可以，这里给你两种常用的优化方案，都能保留第一个nav-item的原有样式，同时消除重复代码：

方案1：使用结构伪类（无需修改HTML代码，推荐） #

利用CSS的:not()和:first-child选择器，直接选中除第一个之外的所有.nav-item，把重复的样式统一设置，修改后的CSS如下：

.nav {
  width: 100%;
}

.nav-item {
  width: 30%;
  text-align: center;
}

/* 选中除第一个之外的所有导航项，统一设置公共样式 */
.nav-item:not(:first-child) {
  margin-left: -2.5%;
  clip-path: polygon(0% 0%, 90% 0%, 100% 100%, 10% 100%);
}

.nav-link {
  background-color: #F3F4F5;
  color: black;
  font-family: "Times New Roman", Times, serif;
}

/* 仅保留第一个导航项的特殊样式 */
#progress-item {
  clip-path: polygon(90% 0%, 0% 0%, 0% 100%, 100% 100%);
}

这个方案完全不用改动现有HTML代码，CSS直接替换原有对应部分即可，后续如果新增同类型的导航项，也会自动应用后面的公共样式，无需额外加代码。

方案2：新增公共类（兼容性更好，适合需要兼容旧浏览器的场景） #

先给后面两个nav-item新增同一个公共类，比如叫nav-item--common，修改后的HTML片段如下：

<li class="nav-item" id="progress-item" role="presentation">
  <a class="nav-link" id="progress-tab" data-toggle="tab" href="#progress">
    Overall progress
  </a>
</li>
<!-- 后面两个导航项新增公共类 -->
<li class="nav-item nav-item--common" id="rank-item" role="presentation">
  <a class="nav-link" id="rank-tab" data-toggle="tab" href="#rank">
    Ranking table
  </a>
</li>
<li class="nav-item nav-item--common" id="achievements-item" role="presentation">
  <a class="nav-link" id="achievements-tab" data-toggle="tab" href="#achievements">
    Achievements list
  </a>
</li>

然后对应修改CSS，把重复样式放到公共类下：

.nav {
  width: 100%;
}

.nav-item {
  width: 30%;
  text-align: center;
}

/* 公共类统一设置重复样式 */
.nav-item--common {
  margin-left: -2.5%;
  clip-path: polygon(0% 0%, 90% 0%, 100% 100%, 10% 100%);
}

.nav-link {
  background-color: #F3F4F5;
  color: black;
  font-family: "Times New Roman", Times, serif;
}

#progress-item {
  clip-path: polygon(90% 0%, 0% 0%, 0% 100%, 100% 100%);
}

这个方案兼容IE9及以上版本浏览器，适合对兼容性要求高的项目。

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