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. 如果声明来自是“样式”属性，则计数 1..
2. 统计选择器中 ID 属性的数量（= b）
3. 计算选择器中其他属性和伪类的数量（= c）
4. 计算选择器中元素名称和伪元素的数量（= d）

也就是说：

1. 内联声明样式=""
2. ＃我的身份 {}
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}，我们不像简单的A.htmlactionlink {c=1, d=1}那样计算顺序

Answer 2

尝试

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

a.htmlactionlink 
{
    color: red;
}

演示