c# - CSS 颜色被链接覆盖

Question

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

我正在尝试使用 CSS 指定我的 html 文本的颜色。我已经使用 class 说明符在网站的另一个区域成功地做到了这一点，而且效果很好。但是，我现在正在尝试更改链接的颜色(C# Hml.ActionLink())并且我的 CSS 被另一种链接样式覆盖(使用 Chrome 开发人员工具验证)，即使在使用 !important 时也是如此.

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

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

有什么想法吗？顺便说一句，我对 CSS 还很陌生。

哦，我可以看到我的 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;
}

Answer 1

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

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

你也可以像这样更具体

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

> 表示您的 anchor 必须是类更改/未更改的元素的直接后代。

---

与您的问题无关，但我想指出:

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

代替

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

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