导航栏上的 CSS 颜色更改不适用于类答案

【问题标题】：CSS color change on nav bar not working with class导航栏上的 CSS 颜色更改不适用于类
【发布时间】：2020-02-08 08:34:51
【问题描述】：

我在导航栏中有一个按钮，当它被点击时，它应该在“活动”类中。导航栏开始时背景色透明，当单击按钮时，导航栏会变为背景色白色（不起作用）。当我在 .active 中使用 !important 时，它确实有效，但在单击按钮之前它是白色的（不透明）。这些样式在媒体查询中。有没有更好的方法来做到这一点？

html...

<nav class="navbar-default">
  <div class="container-fluid no-transition">
    <div value="colorChange" class="topNav">
      <div class="navbar-header">
        <button type="button" value="hideMenu" class="navbar-toggle button_container collapsed" [ngClass]="{'active': !menuCollapsed}" (click)="toggleMenu()"> 
         <div>
           <mat-icon class="menuIcon">menu</mat-icon>
         </div>      
        </button>
      </div>       
    </div>
  </div>
</nav>

SCSS...

    .topNav {
        background-color: rgba(0, 0, 0, 0) !important;
    }

   // adding !important to below turns it white, but no transparent before click

    .navbar-toggle.active, .topNav {
        background-color: white;
     }

【问题讨论】：

附带说明，您不应该将div 放在button 中，因为它是无效的HTML。
感谢您的留言。如果您有任何建议，请告诉我（span 不起作用）。
为什么span 不起作用？这是我的建议，但您可能需要使用 display: block; 对其进行样式设置
点击时更改颜色应该使用 :active 伪类。不确定这是否会与任何其他应用的 css 冲突。但是基于上面的例子，删除 !important 并将你的 navbar-toggle 选择器更新为 .navbar-toggle:active, .topNav { background-color: yellow; } 应该会让您更进一步了解您正在寻找的东西。
@IanDevlin 是的，谢谢你， display: block 让 span 工作了。

标签： html css angular

【解决方案1】：

因此，您希望当按钮具有特定的类时，其父组件（导航栏）将具有特定的样式。这实际上不可能使用 CSS 来影响父组件。您应该将类修改添加到父级，或者两者都添加，导航栏+按钮

<nav class="navbar-default">
  <div class="container-fluid no-transition">
    <div value="colorChange" class="topNav" [ngClass]="{'active': !menuCollapsed}">
      <div class="navbar-header">
        <button type="button" value="hideMenu" class="navbar-toggle button_container collapsed" [ngClass]="{'active': !menuCollapsed}" (click)="toggleMenu()"> 
         <div>
           <mat-icon class="menuIcon">menu</mat-icon>
         </div>      
        </button>
      </div>       
    </div>
  </div>
</nav>

 .topNav {
   background-color: rgba(0, 0, 0, 0);
 }

 .topNav.active {
   background-color: white;
 }

或者，因为你使用的是 SCSS，你也可以使用：

 .topNav {
   background-color: rgba(0, 0, 0, 0);

   &.active {
      background-color: white;
   }
 }

此外，作为一般规则，尽量避免在你的 CSS 中使用 !important，这对于今天来说是一个简单的解决方案，但对于明天来说却是一个痛苦

【讨论】：

太棒了。很好解释
是的，这两个都不起作用。感谢您指出这在 CSS 中是不可能的。我将不得不寻找另一种解决方案。
我刚刚意识到，在这两个示例中，我们都缺少关闭 ngClass 的 } 第三行应该是：<div value="colorChange" class="topNav" [ngClass]="{'active': !menuCollapsed}"> 和按钮 ngclass 相同。尝试更新
@aitorpalomarescastellano。是的，这正在工作。抱歉，缺少括号。通过解决另一个媒体查询中的冲突，我能够摆脱 !important 。我没有考虑将 ngClass 添加到 .topNav。很好的解决方案，非常感谢。