将 CSS 应用于第二级项目符号点会更改 tabsetPanel() 项目符号点

Question

这实际上是我第一次在自己的代码中使用 CSS，我在第一件事上就遇到了麻烦。 我有这个非常精致的闪亮应用程序（我在学习 CSS 之前做过），我想在它上面使用这个新技能。我想做的第一件事是改变第二级的要点。因此，ui中的代码是：

tags$ul(
  tags$li("1 or 2 tails. Basically, 1 tail is when the hypothesis says that one of the averages will be bigger than the other. And, 2 tails is when the hypothesis says that the averages will be different no matter which one is bigger."),
  tags$li("Grouped or paired."),
  tags$li("Grouped: when there is no special relationship between pairs of data in between the two samples. The sample size (n) for each sample does not require to be the same. For example:"),
  tags$ul(
    tags$li("Comparing the length of 30 leaves taken from the top of a tree and 32 taken from the bottom part of the tree;"),
    tags$li("Comparing male and female height between 30 males and 31 females, not necessarily related;")
  ),
  tags$li("Paired: when there is a pair relationship between samples. Typical for data taken from samples in different conditions of the same subject, or between siblings. The sample size (n) for each sample must be the sam. For example:"),
  tags$ul(
    tags$li("Comparing the length of top and bottom leaves from 30 trees;"),
    tags$li("Comparing male and female height between 30 brothers and 30 sisters;")
  )
)

我的 CSS 是：

ul ul li {
  list-style-type: square;
}

它可以在我想要的地方正常工作： 但是，它的作用远不止于此：这段代码在 tabsetPanel() 的 tabPanel() 内，在 tabPanel() 内的 navbarPage() 内。问题是：tabsetPanel() 中的项目也收到了方形子弹。通过窥探 Shiny 的 HTML，我看到了：tabsetPanel() 也是一个列表。

# Show a tabset that includes a plot, summary, and
# table view of the generated distribution
mainPanel(
  tabsetPanel(
    tabPanel("Plot", plotOutput("plot")),
    tabPanel("Summary", verbatimTextOutput("summary")),
    tabPanel("Table", tableOutput("table"))
  )
)

<div class="col-sm-8">
  <div class="tabbable tabs-above">
    <ul class="nav nav-tabs">
      <li class="active">
        <a href="#tab-7055-1" data-toggle="tab">Plot</a>
      </li>
      <li>
        <a href="#tab-7055-2" data-toggle="tab">Summary</a>
      </li>
      <li>
        <a href="#tab-7055-3" data-toggle="tab">Table</a>
      </li>
    </ul>
    <div class="tab-content">
      <div class="tab-pane active" id="tab-7055-1">
        <div id="plot" class="shiny-plot-output" style="width: 100% ; height: 400px"></div>
      </div>
      <div class="tab-pane" id="tab-7055-2">
        <pre id="summary" class="shiny-text-output"></pre>
      </div>
      <div class="tab-pane" id="tab-7055-3">
        <div id="table" class="shiny-html-output"></div>
      </div>
    </div>
  </div>
</div>

我还看到tabsetPanel() 有两个类：nav 和nav-tabs。因此，我尝试了这个 CSS：

ul ul li {
  list-style-type: square;
}

.nav, .nav-tabs {
  list-style-type: none;
}

起初，我只有其中一个，但没有。还是不行。

具有所有重要特征的虚拟 ui 是：

ui <- fluidPage(
  navbarPage(
    tabPanel(title = "Just to be here",
             tabsetPanel(
               tabPanel(title = "This seems to be causing some trouble...",
                        tags$ul(
                          tags$li("Text 1"),
                          tags$li("Text 2"),
                          tags$li("Text 3"),
                          tags$ul(
                            tags$li("Text 3.1"),
                            tags$li("Text 3.2")
                          ),
                          tags$li("Text 4"),
                          tags$ul(
                            tags$li("Text 4.1"),
                            tags$li("Text 4.2")
                          )
               )
             )
    )
  )
)

那么，我的问题是：我怎样才能只将方形项目符号应用于实际列表，而不是tabPanel()s？

Answer 1

尝试使用 JS 向你的 UL 添加类：（你应该在你的 js 代码中更改数字“1”。这取决于你的页面上有多少个 ul。

document.getElementsByTagName("ul")[1].classList.add("newClass");

.newClass li{
  list-style-type: square;
}

for example: 
    <ul class="nav nav-tabs"> 
      <li class="active">
        <a href="#tab-7055-1" data-toggle="tab">Plot</a>
      </li>
      <li>
        <a href="#tab-7055-2" data-toggle="tab">Summary</a>
      </li>
      <li>
        <a href="#tab-7055-3" data-toggle="tab">Table</a>
      </li>
    </ul>
    
        <ul class="nav nav-tabs"> 
      <li class="active">
        <a href="#tab-7055-1" data-toggle="tab">Plot</a>
      </li>
      <li>
        <a href="#tab-7055-2" data-toggle="tab">Summary</a>
      </li>
      <li>
        <a href="#tab-7055-3" data-toggle="tab">Table</a>
      </li>
    </ul>