css - 如何让下划线在表格内工作

Question

我正在尝试更改文本颜色并在选择链接时为文本添加下划线(它将具有“已选择”类)。出于某种原因，即使使用 !important，我也无法让它工作。是的，我知道“a”应该在“li”里面 :)

HTML:

<a href="">
<li class="list selected">
<table>
<tr><td class="first">Text here</td><td class="second"><div class="icon-arrow-down"></div></td></tr>
</table>
</li>
</a>

CSS:

table {
    .selected {
        color:green !important;
        text-decoration:underline !important;
    }
}

这是我的 fiddle http://jsfiddle.net/vwLu8/1/ .

Answer 1

除非您使用预处理器，否则您的选择器不应嵌套，您还需要更改特异性级别，将 CSS 更改为:

Demo Fiddle

.selected table td{
    color:green;
    text-decoration:underline;
}

More on specificity from MDN

Specificity is the means by which a browser decides which property values are the most relevant to an element and gets to be applied. Specificity is only based on the matching rules which are composed of selectors of different sorts.