CSS颜色被链接覆盖

本文关键字：覆盖 链接 颜色 CSS | 更新日期: 2023-09-27 18:26:35

我在C#MVC网站中使用Razor为现有网站添加功能。

我正在尝试使用CSS指定html文本的颜色。我已经在网站的另一个区域使用class说明符成功地完成了这项工作，效果非常好。然而，我现在正在尝试更改链接的颜色（C#Hml.ActionLink（）），并且我的CSS被另一种链接样式覆盖（使用Chrome Developer Tools验证），即使在使用!important时也是如此。

这种链接样式似乎有很大的范围，因此我无法在不影响网站其他区域的情况下更改它。

我已经尝试设置color属性和text-decoration-color属性，并在两者上都尝试了!important。

有什么想法吗？我是相当新的CSS btw.

哦，我可以看到我的CSS更改实际上是在Chrome开发工具中使用的，但它们只是被覆盖了（所以类的东西是正确的）。

Razor代码：

<div id="Project">
    @foreach (string name in Model.Foo)
     {
        string className = Model.Bar.Contains(name) ? "changed" : "unchanged";
        <p class=@className>@Html.ActionLink(foo)</p>
     }
</div>

CSS代码（已经尝试了以下的变体）：

.changed {
    color: red !important;
}
.unchanged {
    text-decoration: none;
    text-decoration-color: blue !important;
}

CSS颜色被链接覆盖

更改CSS选择器以指定内部元素

.changed a {...}
.unchanged a {...}

你也可能更具体，像这个

.changed > a {...}
.unchanged > a {...}

>表示您的锚点必须是类changes/unchanged元素的直接中心点。

不关心你的问题，但我想指出：

<p class="@className">@Html.ActionLink(foo)</p>

而不是

<p class=@className>@Html.ActionLink(foo)</p>

（在你的情况下仍然有效，但总有一天你会遇到一些奇怪的问题）

尝试更改选择器以增加特定

.changed a {
    color: red !important;
}
.unchanged a {
    text-decoration: none;
    text-decoration-color: blue !important;
}

正如您所描述的，您想要更改链接颜色，而不是p标记所以试试这个

.changed a{
    color: red !important;
}
.unchanged a{
    text-decoration: none;
    text-decoration-color: blue !important;
}

您需要将CSS应用于锚点标记，而不是段落标记，请尝试以下操作：

.changed a {
    color: red !important;
}
.unchanged a {
    text-decoration: none;
    text-decoration-color: blue !important;
}
相关文章：