mvc html.actionlink css class

The answer is in understanding the CSS: 6.4.3 Calculating a selector's specificity. Small Extract

A selector's specificity is calculated as follows:

1. count 1 if the declaration is from is a 'style' attribute ..
2. count the number of ID attributes in the selector (= b)
3. count the number of other attributes and pseudo-classes in the selector (= c)
4. count the number of element names and pseudo-elements in the selector (= d)

Other words:

1. inline declaration style=""
2. #myId {}
3. .htmlactionlink {}
4. a {}

The point 3. says, that the same value for precedense is applied to class and pseudo-class (see more in w3schools.com)

It means, that calculation for

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

while

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

And that's why the a:link statement takes the precedence, because it takes 1 point for class and one for element name.

NOTE:

from my perspective the most correct solution is the

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

In that case, we do get {c=2, d=0}, we do not count on the order as with a simple A.htmlactionlink {c=1, d=1}

try

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

a.htmlactionlink 
{
    color: red;
}

DEMO