链接不使用默认 CSS答案

【问题标题】：Link does not use default CSS链接不使用默认 CSS
【发布时间】：2021-09-05 00:25:03
【问题描述】：

我有一个指向此 html 底部的链接（“返回”）。

<div style="margin-top: 5em; display: flex; justify-content: center; height: 100vh; align-items: center;">

    <div class="shadow-lg p-0 mb-5 bg-white rounded" style="padding: 3em;">
        
        <div class="card-body">
            <h6 style="margin-top: 0.3em; font-size: medium;">Reset password</h6>
            <form [formGroup]="passwordResetForm" (ngSubmit)="onSubmit()">
                <div class="form-group">
                    <label for="email">Email address</label>
                    <input type="text" formControlName="email" class="form-control"
                        [ngClass]="{ 'is-invalid': submitted && f.username.errors }" />
                    <div *ngIf="submitted && f.email.errors" class="invalid-feedback">
                        <div *ngIf="f.email.errors.required">Email address is required</div>
                    </div>
                </div>
                <div class="d-flex justify-content-between" style="padding-top: 1em;">
                    <div class="form-group">
                        <button [disabled]="loading" class="btn btn-primary">
                            <span *ngIf="loading" class="spinner-border spinner-border-sm mr-1"></span>
                            Reset password
                        </button>
                    </div>
                    <a class="p-2" routerLink="../login">Go back</a>
                </div>

               
                <div *ngIf="error" class="alert alert-danger mt-3 mb-0">{{error}}</div>
            </form>

        </div>
    </div>
</div>

链接有效。但我根本无法让它看起来像一个链接。即没有下划线，没有手形光标。

在我的项目中绝对没有任何用于链接的 CSS。我只使用开箱即用的标准链接（黑色文本、黑色下划线、悬停时的手形图标）。

我尝试向此链接添加一些 CSS (a:hover)，但它忽略了我。

我在此目录中有其他 html 文件，它们的链接与预期的相同。只有这一个文件拒绝。

我的 component.ts 中完全没有逻辑。只有类声明和装饰器的东西。

【问题讨论】：

呈现的标签是什么样子的（开发工具>元素），是否有href="..."属性？如果没有，您是否将 RouterModule 导入到声明组件的模块中？
打开开发工具，选择你的元素，点击“计算”，你可以看到用于计算元素每个属性的 CSS。
@ChristophLütjen 不确定我是否找对了地方，但它说：a:not([href]) { color: inherit;文字装饰：无； }
我有RouterModule
当您检查一个元素时，您会在左侧看到您的 DOM（HTML），在右侧看到节点属性（例如您的 CSS）。现在看左边，你会发现你的链接没有href 属性。因为它没有href，所以它a）不起作用并且b）看起来不像一个链接。典型原因：RouterModule 未加载（在声明组件的模块中！！）或 routerLink 属性中的错误路由。一旦您看到 href 属性，您的链接就会起作用并且看起来像一个链接（不需要任何其他样式或 !important 在这里）。

标签： html css angular hyperlink

【解决方案1】：

通过查看您发布的代码，我认为该路线被提及不正确，因为基本 DIR 已经设置如下，所以路线前面不会有点...

<!--Incorrect -->
<a class="p-2" routerLink="../login">Go back</a>

<!--Correct -->
<a class="p-2" routerLink="/login">Go back</a>

来到 CSS 尝试向您尝试添加的样式添加重要内容，如下所示。

a:hover {
 text-decoration: underline !important;
  color: #3B5998 !important;
}
a{
  cursor: pointer !important;
}

还要检查 app.module.ts 文件中的 RouterModule 导入。
参考Link

【讨论】：

您需要在模块中使用 RouterModule，在该模块中声明组件（可能是也可能不是应用程序模块）以使指令工作
它有效。链接行为正确，只是不看起来正确。