html - 为不同部分设置 rmarkdown 选项卡颜色

Question

我想用 Rmarkdown 创建一个 html。html 应包含彩色标签。根据这个问题的答案，我尝试创建一个 rmarkdown 文件，我可以在其中设置不同选项卡的颜色。

这是一个最小的工作示例（降价）：

---
title: "tab colors"
author: "cettt"
output: 
  html_document:
  self_contained: no

---
<style>
  .nav-pills>li>a {
     color: red;
     }
  .nav-pills>li>a:hover, .nav-pills>li>a:focus, .nav-pills>li.active>a, .nav-pills>li.active>a:hover, .nav-pills>li.active>a:focus{
     color: black;
     background-color: red;
     }
  .nav-pills > li:nth-of-type(2)>a {
     color: green;
     }
  .nav-pills > li:nth-of-type(2)>a:hover, .nav-pills > li:nth-of-type(2)>a:focus, .nav-pills > li:nth-of-type(2).active>a {
     color: black;
     background-color: green;
     }
</style>

---

# {.tabset .tabset-fade .tabset-pills}

## red 1
## red 2

# {.tabset .tabset-fade .tabset-pills}

## green 1
## green 2

但是，我希望 red1 和 red2 部分的标签颜色为红色，而 green1 和 green2 部分的标签颜色为绿色。有人对此有什么建议吗？

编辑：

这是html的相关部分

<div id="section" class="section level1 tabset tabset-fade tabset-pills">
<h1></h1>
<div id="red-1" class="section level2">
<h2>red 1</h2>
</div>
<div id="red-2" class="section level2">
<h2>red 2</h2>
</div>
</div>
<div id="section-1" class="section level1 tabset tabset-fade tabset-pills">
<h1></h1>
<div id="green-1" class="section level2">
<h2>green 1</h2>
</div>
<div id="green-2" class="section level2">
<h2>green 2</h2>
</div>
</div>

标签： htmlcssrmarkdownr-markdown