Как я могу использовать другой цвет библиотеки CSS, а не Material Design здесь?

Question

<nav class="w3-sidebar w3-collapse w3-sand w3-animate-left" style="z- 
    index:3;width:300px;" id="mySidebar"><br>
  <div class="w3-container">
    <a href="#" onclick="w3_close()" class="w3-hide-large w3-right w3-jumbo 
    w3-padding w3-hover-grey" title="close menu">
      <i class="fa fa-remove"></i>
    </a>
    <img src="me.jpg" style="width:45%;" class="w3-round"><br><br>
    <h4><b>PORTFOLIO</b></h4>
    <p class="w3-text-grey">Name</p>
  </div>
  <div class="w3-bar-block">
    <a href="#portfolio" onclick="w3_close()" class="w3-bar-item w3-button 
    w3-padding w3-text-teal"><i class="fa fa-th-large fa-fw w3-margin- 
    right"></i>PORTFOLIO</a>
    <a href="#about" onclick="w3_close()" class="w3-bar-item w3-button w3- 
    padding"><i class="fa fa-user fa-fw w3-margin-right"></i>ABOUT</a>
    <a href="#contact" onclick="w3_close()" class="w3-bar-item w3-button 
    w3-padding"><i class="fa fa-envelope fa-fw w3-margin-right"> . 
    </i>CONTACT</a>
  </div>
  <div class="w3-panel w3-large">
    <i class="fa fa-facebook-official w3-hover-opacity"></i>
    <i class="fa fa-instagram w3-hover-opacity"></i>
    <i class="fa fa-snapchat w3-hover-opacity"></i>
    <i class="fa fa-pinterest-p w3-hover-opacity"></i>
    <i class="fa fa-twitter w3-hover-opacity"></i>
    <i class="fa fa-linkedin w3-hover-opacity"></i>
  </div>
</nav>

Это боковое меню.Я использовал w3-sand для цвета фона (навигационная метка, первая строка).Проблема в том, что я могу использовать только цвета Material Design для фона боковой панели.Я не могу использовать любой другой цвет из разных библиотек цветов CSS.Есть идеи почему?

Answer 1

Предположим, что это еще одна библиотека css secondlibrary.css

nav
{
color:red;
}

И это стиль библиотеки основных материалов для CSS-дизайна

nav
{
color:blue;
}

Так что если вы хотите использовать цветкрасный для навигационной панели, а не синий, который задается дизайном материала, тогда есть много способов сделать это.Я лично рекомендую вам сделать это.

• 1: перейти в другую библиотеку css
• 2: переименовать "nav" в ".mynav".

• 3: используйте ".mynav" в классе навигации.

  nav class = "mynav w3-sidebar w3-collapse w3-sand w3-animate-left" style = "z-index: 3; ширина: 300px;»id = "mySidebar"