html - 我怎样才能在这里使用另一种 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;
}

这是导航栏的主要 Material 设计 css 库样式

nav
{
color:blue;
}

因此，如果您想为导航栏使用红色而不是 Material 设计设置的蓝色，那么有很多方法可以做到这一点。我个人建议您这样做。

• 1:转到另一个库css
• 2:将“nav”重命名为“.mynav”。

• 3: 在导航类中使用".mynav"。

  nav class="mynav w3-sidebar w3-collapse w3-sand w3-animate-left"style="z- index:3;width:300px;"id="mySidebar"