表格单元格：悬停属性不会更改背景颜色

Question

我的CSS文件中有以下代码：

table .pc {
    border: 1px solid #000;
    border-collapse: collapse;
}

table .pc td {
    border: 1px solid #aaa;
}

table .pc td,
table .pc th {
    width: 30px;
    height: 30px;
}

table .pc td:hover {
    background-color: #000;
    color: #fff;
    cursor: pointer;
}

table .pc th {
    background-color: #aaa;
    border: 1px solid #000;
}

.bold {
    font-weight: bold;
}

.center {
    text-align: center;
}

我有以下HTML表格：

<table class="pc">
    <tbody>
        <tr>
            <th></th>
            <th>229</th>
            <th>230</th>
        </tr>
        <tr class="bold center">
            <th>229</th>
            <td></td>
            <td style="background-color: rgb(0,255,40);">0</td>
        </tr>
        <tr class="bold center">
            <th>230</th>
            <td style="background-color: rgb(0,255,40);">0</td>
            <td style="background-color: rgb(242,12,40);">95</td>
        </tr>
    </tbody>
</table>

我的问题是，如果我将鼠标移到没有任何内联样式的单元格上，它可以正常工作，默认背景颜色（白色）将变为黑色，但是当我移动时背景颜色设置为内联的单元格，它不执行任何操作。 （它只会将文本的颜色更改为白色。）

细胞＆＃39; rgb代码是基于PHP内部的值在PHP中生成的。

Answer 1

因为内联样式具有最高优先级，因此除非您使用!important :hover

，否则它不会起作用

table.pc td:hover {
    background-color: #000 !important; /* Add important over here */
    color: #fff;
    cursor: pointer;
}

之间也有空格

table .pc 对于您的所有选择器不正确，它应为table.pc

因为当table .pc之间有空格时，它会查找嵌套在class元素中pc table的元素，这不是这里的情况

因此，当你摆脱空间并使其table.pc时，它会查找名为table的{​​{1}}元素<{1}}

Demo

Answer 2

内联样式的优先级高于CSS类声明。

您可以在CSS中使用！important关键字来覆盖内联样式。

table .pc td:hover {
    background-color: #000 !important;
    color: #fff;
    cursor: pointer;
}

Answer 3

尝试使用此代码DEMO来添加类 的 HTML

<table class="pc">
    <tbody>
        <tr>
            <th></th>
            <th>229</th>
            <th>230</th>
        </tr>
        <tr class="bold center">
            <th>229</th>
            <td></td>
            <td class="green">0</td>
        </tr>
        <tr class="bold center">
            <th>230</th>
            <td class="green">0</td>
            <td class="red">95</td>
        </tr>
    </tbody>
</table>

<强> CSS

table .pc {
    border: 1px solid #000;
    border-collapse: collapse;
}

table .pc td {
    border: 1px solid #aaa;
}

table .pc td,
table .pc th {
    width: 30px;
    height: 30px;
}
.green {
  background-color: rgb(0,255,40);
}
.red {
  background-color: rgb(242,12,40);
}
td:hover {
    background-color: #000;
    color: #fff;
    cursor: pointer;
}

table .pc th {
    background-color: #aaa;
    border: 1px solid #000;
}

.bold {
    font-weight: bold;
}

.center {
    text-align: center;
}

Answer 4

要获取类名为“pc”的Table元素，需要编写table.pc

table.pc td:hover {
   background-color: #000;
   color: #fff;
   cursor: pointer;
}

请参考jsfiddle http://jsfiddle.net/anu1718/v5E72/