0

C# MVC Web サイトで Razor を使用して、既存のサイトに機能を追加しています。

CSS を使用して HTML テキストの色を指定しようとしています。class指定子を使用してサイトの別の領域でこれを正常に実行しましたが、うまく機能しました。ただし、リンクの色を変更しようとしており (C# Hml.ActionLink())、CSS を別のリンク スタイル (Chrome 開発者ツールを使用して検証) でオーバーライドしてい!importantます。

このリンク スタイルは範囲が広いようで、サイトの他の領域に影響を与えずに変更することはできません。

私は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;
}
4

4 に答える 4

2

内部要素を指定するように CSS セレクターを変更します

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

このようにもっと具体的にすることもできます

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

> は、アンカーがクラス変更/未変更の要素の直接の子孫でなければならないことを意味します。

あなたの問題とは関係ありませんが、私はそれを指摘したかった:

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

それ以外の

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

（あなたの状況ではまだ動作しますが、ある日奇妙な問題に遭遇するでしょう）

于 2013-08-06T17:10:20.587 に答える
0

セレクターを変更して具体性を高めてみてください。

.changed a {
    color: red !important;
}

.unchanged a {
    text-decoration: none;
    text-decoration-color: blue !important;
}
于 2013-08-06T17:10:01.163 に答える