css - mvc html.actionlink css クラス

Question

a:link の継承されたスタイルを上書きするクラスを取得できないようです

@Html.ActionLink("Back to List", "Index", null, new { @class = "htmlactionlink" })

CSS

a:link, a:visited,
a:active, a:hover 
{
    color: #333;
}

.htmlactionlink {
    color: red;
}

要素のスタイルに影響しませんか?

インライン スタイルを適用すると、機能します。

Answer 1

答えは、CSS を理解することです: 6.4.3 Calculating a selector's specificity。小エキス

セレクターの特異性は次のように計算されます。

1. 宣言が 'style' 属性の場合は 1 を数えます。
2. セレクター内の ID 属性の数をカウントする (= b)
3. セレクター内の他の属性と疑似クラスの数をカウントします(= c)
4. セレクター内の要素名と疑似要素の数を数える (= d)

他の言葉:

1. インライン宣言 style=""
2. ＃私のID {}
3. .htmlactionlink {}
4. {}

ポイント 3. は、優先度の同じ値がクラスと疑似クラスに適用されることを示しています(詳細は w3schools.com を参照してください)。

つまり、その計算

a:link is { a=0, b=0, c=1, d=1}

その間

.htmlactionlink is { a=0, b=0, c=1, d=0}

a:linkクラスに1ポイント、要素名に1ポイントかかるため、ステートメントが優先されるのはそのためです。

ノート：

私の観点から、最も正しい解決策は

.htmlactionlink:link, .htmlactionlink:visited ... {
    color: red;
}

その場合、{ c=2 , d=0} を取得します。単純な{c=1, d=1}のように順序をカウントしません。A.htmlactionlink

Answer 2

試す

a:link, a:visited,
a:active, a:hover 
{
    color: #333;
}

a.htmlactionlink 
{
    color: red;
}

デモ