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 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”不在<a>

上

试试这个;

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

或者失败;

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

Answer 4

不应该是，barLinks仅适用于标签，如果你将你的css更改为#rightBar .barLinks，它应该有效。

Answer 5

所以我在这里看到的问题是，您提到了使用CSS选择器无法正确到达锚标记元素的地址。如果您要使用更长和更突出的地址路线，则应如下所示：

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

但是，由于您正在寻找一种更具体的方法，因此您的方法是正确的，除了anchor标签没有它自己的类，因此a.barLink将什么也找不到。它应该是：

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

CSS和特异性 - 类vs ids

5 个答案: