css - CSS 和特异性 - 类 vs 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元素没有 class 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" 不在<a>

尝试这个;

#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;
}