Почему мне нужно указать более одного класса CSS, чтобы изменить цвет фона? - PullRequest
Новая
       7

Почему мне нужно указать более одного класса CSS, чтобы изменить цвет фона?

0 голосов
/ 04 октября 2019

Почему следующий блестящий код панели инструментов не меняет цвет фона логотипа на красный? Есть ли способ просмотра предустановленных стилей CSS, предположительно, это как-то связано с этим? 

library(shiny)
library(shinydashboard)

ui <- dashboardPage(

  dashboardHeader(title = "MY TITLE"),

  dashboardSidebar(

    tags$head(tags$style(HTML('
                                /* logo */
                                .logo {
                                background-color: #FF5733;
                                }
                                ')))


  ),

  dashboardBody(

  )
)

server <- function(input, output){
}

shinyApp(ui = ui, server = server)

Я знаю, что использование следующего кода превращает цвет фона логотипа в красный, но я не понимаю, зачем мне это нужночтобы указать .skin-blue .main-header, а также .logo 

.skin-blue .main-header .logo {
                                background-color: #FF5733;
                                }

Я вывожу в консоль RStudio HTML-код тела из вышеупомянутого блестящего кода панели инструментов (код заголовка не отображался вконсоль). Я вставил это в HTML-документ и сам добавил теги head и style. Здесь цвет фона логотипа меняется на красный при использовании только .logo 

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      /* logo */
      .logo {background-color: #FF5733;}
    </style>
  </head>
  <body class="skin-blue" style="min-height: 611px;">
      <div class="wrapper">
        <header class="main-header">
          <span class="logo">MY TITLE</span>
          <nav class="navbar navbar-static-top" role="navigation">
            <span style="display:none;">
              <i class="fa fa-bars"></i>
            </span>
            <a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
              <span class="sr-only">Toggle navigation</span>
            </a>
            <div class="navbar-custom-menu">
              <ul class="nav navbar-nav"></ul>
            </div>
          </nav>
        </header>
        <aside id="sidebarCollapsed" class="main-sidebar" data-collapsed="false">
          <section id="sidebarItemExpanded" class="sidebar"></section>
        </aside>
        <div class="content-wrapper">
          <section class="content"></section>
        </div>
      </div>
    </body>
</html>
...