为什么我的 CSS 不适用于注销按钮答案

【问题标题】：why my css is not working for logout button为什么我的 CSS 不适用于注销按钮
【发布时间】：2021-06-24 16:45:54
【问题描述】：

我编写了一个简单的 html 和 css 文件，但我的 css 不适用于倒数第二个链接，即注销链接

这是我的 HTML 文件的代码

<nav class="navbar navbar-expand-md navbar-dark">
    <a class="navbar-brand" href="#">
        <img src="../../../assets/logo.JPG" class="d-inline-block img-fluid align-top" alt="">
    </a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" 
    data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" 
    aria-expanded="false" aria-label="Toggle navigation">

      <span class="navbar-toggler-icon"></span>
    </button>
  
    <div class="collapse navbar-collapse" id = "navbarSupportedContent" >
      <ul class="navbar-nav mr-auto">
        <li class="nav-item">
            <div *ngIf="email" class="navbar-text custom float-left">
                {{email}}
            </div>
        </li>
        <li class="nav-item">
            <a [routerLink]=" ['/'] " class="nav-link">
            <fa-icon [icon] = "faHome" primarycolor = "black"></fa-icon>
            Home</a>
        </li>
       
        <li class="nav-item">
            <a *ngIf="!email" [routerLink]=" ['/signin'] " 
            routerLinkActive="active" class="nav-link">
            <fa-icon [icon] = "faSignInAlt" primarycolor = "black"></fa-icon> 
            signIn</a>
        </li>

        <li class="nav-item">
            <a *ngIf="!email" routerLinkActive="active" 
            [routerLink]=" ['/signup'] " class="nav-link">
            <fa-icon [icon] = "faUserPlus" primarycolor = "black"></fa-icon>    
        signUp</a>
        </li>


        <li class="nav-item">
            <a *ngIf="email" (click)="handleSignOut()" class="nav-link">
                <fa-icon [icon] = "faSignOutAlt" primarycolor = "black"></fa-icon>
                Log Out</a>
        </li>


        <li class="nav-item">
            <a *ngIf="email" routerLinkActive="active" [routerLink]=" ['/addpost']"
            class="nav-link btn btn-warning text-primary">
            Post Your Story</a>
        </li>
         
      </ul>
     
    </div>
  </nav>

这是我的 css 文件的代码

   .active{
    background-color: purple;
}

.custom{
    color: black;
}
nav{
    background-color: #ffffff;
}

li>a:link{
    color: black;
    border-radius: 15px;
}

li>a:visited{
    color: black;
    border-radius: 15px;
}

我不知道这里发生了什么该链接中的内联 CSS 运行良好我基本上希望我的注销是黑色的

【问题讨论】：

我认为这是因为您的注销链接中没有任何href。所以它不是一个有效的链接，所以它不起作用。尝试使用特定的课程（我检查过，是的，如果你想要 :link 工作 see here，你需要 attr href）

标签： html css angular typescript

【解决方案1】：

根据一小段摘录很难猜测。最好的方法是使用 chrome 调试工具的computed 选项卡。您需要检查元素，转到计算选项卡并展开 CSS 属性。您会看到谁设置和覆盖了属性值。

有a good article on how to debug css。

【讨论】：

【解决方案2】：

您是否尝试过通过给它一个唯一的类或 id 并在 css 中使用它来直接定位它？

你有没有试过在你想要的css颜色后面加上“！important”？看起来您正在使用外部 css 库。来自外部库的一些 css 可能难以覆盖。 “！important”有时会有所帮助。

【讨论】：