Question

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

我正在尝试使用CSS指定html文本的颜色。我已经使用class说明符在网站的另一个区域成功完成了这项工作，并且效果很好。但是，我现在正在尝试更改链接的颜色（C＃Hml.ActionLink（）），即使使用!important，我的CSS也会被另一种链接样式（使用Chrome开发者工具验证）覆盖。

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

我尝试设置color属性以及text-decoration-color并尝试!important。

有什么想法吗？我对CSS顺便说一句新手。

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

剃刀代码：

<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 {...}

＆gt;意味着你的锚必须是类更改/未更改元素的直接后代。

未解决您的问题，但我想指出：

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

而不是

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

（仍然适用于你的情况，但有一天你会遇到一些奇怪的问题）

Answer 2

尝试更改选择器以提高特异性，

.changed a {
    color: red !important;
}

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

Answer 3

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

.changed a{
    color: red !important;
}

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

Answer 4

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

.changed a {
    color: red !important;
}

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

CSS颜色被链接覆盖

4 个答案: