样式规则未应用于td元素

Question

我正在使用逻辑来突出显示基于光标是否悬停在行上的单元格：

function setupTable(tbl) {
    if ($(tbl).find('tbody').size() > 0) {
        $(tbl).find('tbody tr').hover(function () {
            $(this).find('td:gt(0)').addClass('highlight');
        }, function () {
            $(this).find('td:gt(0)').removeClass('highlight');
        }).click(window.onTrClick);

        if ($(tbl).find('tbody tr').size() > 10) {
            setUpPagination(tbl);
        }
    }
}

样式规则的定义如下：

.gridview .data
{
    background-color: White;
    padding-left: 3px;
    padding-right: 3px;
}

.highlight
{
    background-color: #3169C6;
    color: White;
    cursor: pointer;
}

但是在悬停时，文字会变白。净效果就好像该行数据被清空一样。我打开IE的开发人员工具栏。并试着玩。

我尝试操纵class属性并找出

class="data highlight"

没有达到预期的效果。但如果我做了

class="highlight"

它有点工作......

我想知道为什么会这样？如果我们这样做，将如何应用规则

class="data highlight"？

<小时/> UPDATE：

我希望.data的填充对.highlight进行“继承”（或维护）。那我该怎么办？

Answer 1

.gridview .data有higher specificity而不是.highlight。

结果是background-color: White（来自.gridview .data，而不是来自background-color: #3169C6的{​​{1}}）和.highlight（来自color: White） ，使它看起来“被淘汰”。

要解决此问题，您应该将.highlight更改为.highlight。

此修复程序将起作用，因为.gridview .highlight和.gridview .data将具有相同的特异性，因此它将归结为最后定义的。这是.gridview .highlight，因此其中的声明将覆盖.gridview .highlight中的声明。

如果您还在其他地方使用.gridview .data课程，请将其更改为.highlight。

Answer 2

.gridview .data的优先级高于.highlight

您可以在这里阅读更多内容 http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/