如何有条件地为顶部选项卡导航器中的文本渲染填充？

<div class="tab-navigation">
  <div class="tab">选项1</div>
  <div class="tab">选项2</div>
  <div class="tab">选项3</div>
</div>

.tab {
  padding: 10px;
  background-color: #f5f5f5;
}

.tab:nth-child(1) {
  /* 第一个选项的样式 */
  color: red;
}

.tab:nth-child(2) {
  /* 第二个选项的样式 */
  color: blue;
}

.tab:nth-child(3) {
  /* 第三个选项的样式 */
  color: green;
}