CSS 和特异性 - 类与 ID

Question

考虑以下 html：

<div id="rightBar">
    <div class="barElement">
        <div class="barText"><a href="#">Not underlined</a><br /></div>
        <div class="barLinks"><a href="#">Should be underlined</a></div>
    </div>
</div>

和以下 css：

#rightBar a
{
    text-decoration: none;
}
#rightBar a.barLinks
{
    text-decoration: underline;
}

“应该加下划线”链接没有下划线，不应该这样，因为它继承了类 barLinks 和 id rightbar。另外 '#rightBar a.barLinks' (0, 1, 1, 1) 比 '#rightBar a' (0, 1, 0, 1) 具有更多的特异性，所以它应该覆盖后者，对吗？

我还能如何让“应该加下划线”链接加下划线而不诉诸使用任何内联规范（CSS 或 html）

Answer 1

您的 a 元素没有类 barLinks。执行此操作：

#rightBar .barLinks a
{
    text-decoration: underline;
}

示例： http://jsfiddle.net/J34mj/2/

Answer 2

这不是特异性问题，而是您使用了错误的选择器。应该是这样的：

#rightBar .barLinks a {}

Answer 3

#rightBar a.barLinks
{
    text-decoration: underline;
}

不起作用，因为 class="barLinks" 不在 上

试试这个；

#rightBar .barLinks a
{
    text-decoration: underline;
}

或者失败了；

#rightBar .barLinks a
{
    text-decoration: underline !important;
}

Answer 4

不应该， barLinks 仅适用于标签，如果您将 css 更改为 #rightBar .barLinks a 它应该可以工作。

Answer 5

因此，我在这里看到的问题是，您提到了使用 CSS 选择器访问锚标记元素的错误地址。如果您要寻找更长、更突出的地址路线，那么它应该如下所示：

#rightbar .barElement .barLinks a{
    text-decoration : underline;
}

但是由于您正在寻找更具体的地址路线，因此您的方法是正确的，除了锚标记没有自己的类这一事实，因此 a.barLink 将找不到任何内容。它应该是这样的：

#rightBar .barLinks a{
text-decoration : underline;
}