如何为Shiny应用导航栏与导航选项卡设置差异化链接文本颜色

核心思路是利用CSS选择器的优先级区分两类导航组件，避免滥用!important导致样式全局覆盖。navbarPage的导航链接嵌套在.navbar-nav容器下，navlistPanel的链接则在.nav.nav-pills.nav-stacked容器下，通过精准定位这两个容器即可分别设置独立样式。

以下是修改后的完整代码，重点调整了CSS部分：

library(shiny)
library(bslib)

ui <- tagList(
  fluidPage(
    titlePanel(""),
    tags$head(tags$style(HTML(
      "
        /* navbarPage导航样式 */
        .navbar-nav > li > a {
            color: pink;
        }
        .navbar-nav > .active > a,
        .navbar-nav > li > a:hover {
            color: red;
        }

        /* navlistPanel导航样式 */
        .nav.nav-pills.nav-stacked > li > a {
            color: #00b386; /* 青绿色 */
            background-color: white;
            border: none;
        }
        .nav.nav-pills.nav-stacked > li > a:hover {
            color: black;
            background-color: white;
        }
        .nav.nav-pills.nav-stacked > .active > a,
        .nav.nav-pills.nav-stacked > .active > a:hover {
            color: black;
            background-color: #ff9933; /* 橙色 */
            border: none;
        }
        "
    ))),
    
    navbarPage(
      windowTitle = "App Name",
      theme = bs_theme(bootswatch = "flatly",
                       base_font = font_google("Lato"),
                       primary = "#333F50",
                       bg = "white",
                       fg = "#D67540"),
      title = "I am the title",
      selected = "Main Tab 1",
      tabPanel(title = "Main Tab 1",
               fluidPage(
                 sidebarLayout(
                   sidebarPanel(textInput(inputId = "text_input", label = "Enter text:")),
                   mainPanel(textOutput(outputId = "text_output"))
                 )
               )
      ),
      tabPanel(title = "Main Tab 2",
               fluidPage(
                 fluidRow(
                   column(7,
                          navlistPanel(
                            tabPanel("Tab 1"),
                            tabPanel("Tab 2"),
                            tabPanel("Tab 3"),
                            widths = c(2, 10),
                            well = FALSE)
                   )))
      )
    )
  )
)

server <- function(input, output){
  output$text_output <- renderText(input$text_input)
}

shinyApp(ui, server)

样式说明： #

• navbarPage：保持原需求，常态文本粉色，选中/悬停时红色，通过.navbar-nav容器精准定位，无需!important。
• navlistPanel：
  • 常态：青绿色文本+白色背景，移除默认边框
  • 悬停：黑色文本，背景保持白色
  • 选中：黑色文本+橙色背景，移除默认选中样式的边框

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