CSS和特异性 - 类vs ids

y3d*_*3di 0 css class css-specificity text-decorations

考虑以下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>
Run Code Online (Sandbox Code Playgroud)

以下css:

#rightBar a
{
    text-decoration: none;
}
#rightBar a.barLinks
{
    text-decoration: underline;
}
Run Code Online (Sandbox Code Playgroud)

"应加下划线"链接没有下划线,不应该是因为它继承了类barLinks和id右栏.另外'#rightBar a.barLinks'(0,1,1,1)比'#rightBar a'(0,1,0,1)更具特异性,所以它应该覆盖后者吗?

除了使用任何内联规范(css或html)之外,我还能如何得到"应加下划线"链接的下划线

Nik*_*las 7

你的a元素没有类barLinks.做这个:

#rightBar .barLinks a
{
    text-decoration: underline;
}
Run Code Online (Sandbox Code Playgroud)

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