我如何在这里使用另一个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作为背景颜色(nav标签，第一行)。问题是，我只能使用Material Design颜色作为我的侧边栏背景。我不能使用来自不同css颜色库的任何其他颜色。知道为什么吗？

Answer 1

假设这是另一个css库secondlibrary.css

nav
{
color:red;
}

这是导航栏的主要材料设计css库样式。

nav
{
color:blue;
}

因此，如果你想使用红色的导航栏，而不是由材料设计设置的蓝色，那么有很多方法可以做到这一点。我个人推荐你这样做。

• 1:转到另一个库css
• 2:将" nav“重命名为”.mynav“。
• 3:在nav类中使用”.mynav“。

导航索引“mynav w3-侧边栏w3-折叠w3-和w3-动画-左”style=“z索引:3；宽度:300px；”id="mySidebar"