Question

css新手问题 -
我们有一个为Table定义的广义css及其Table Cells：

.table {
    width: 100%;
    margin: 1em 0 1em 0;
    border-top: 1px solid #A3C0E8;
    border-left: 1px solid #A3C0E8;    
}

.table td, .table th {
    padding: .6em;
    border-right: 1px solid #A3C0E8;
    border-bottom: 1px solid #A3C0E8;
    vertical-align: middle;
    background:#D7E8FF;
    color:#333;
}

在一个场景中，我想覆盖td样式，以便我可以在Table Cell文本前面显示一个图标图像。因此，如果表格单元格定义为 - <td> Vehicle Name & Details </td>

我想为这个表格单元格应用样式，以便它还在文本前面显示图标图像 - '车辆名称＆amp;详细资料。

我在css文件中添加了这个样式 -

.vehicle { background:url(mainFolder/img/icons/vehicle.png) no-repeat left center; }

并添加到td <td class="vehicle"> Vehicle Name & Details </td> 但没有显示图标。此td的父表是<table class="table">

我错过了什么吗？

谢谢！

Answer 1

.vehicle（一个类选择器） less specific而不是.table td（一个类选择器+一个类型选择器）。

您需要：

更多 specific选择器（例如.table td.vehicle）
一个同样 specific选择器（例如td.vehicle），位于样式表中稍后出现的规则集中

Answer 2

将您的选择器更改为td.vehicle，同时确保它显示在您的css文件中的.table td选择器之后。

您还可以内联特殊td的样式：

<td style="background:url(mainFolder/img/icons/vehicle.png) no-repeat left center;">...</td>

Answer 3

仔细检查以确保您的网址位置正确无误。我首先将绝对路径（http：//site.com/mainFolder ...）放入，然后将其更改为相对路径。

Answer 4

尝试将背景位置替换为

      background:url(mainFolder/img/icons/vehicle.png) no-repeat left top;

您还可以将无重复更改为重复以进行调配，以查看图像是否加载。

另外我建议你安装firebug（如果你使用的是firefox），这样你就可以动态操作html和css。

Answer 5

它应该工作，确保到图像的路线是正确的。并且还要注意，这是您正在设置的背景图像，因此如果您不希望图像位于文本后面，则必须使用填充 - ＆gt; jsfiddle

Css - 如何覆盖表格单元格的css

5 个答案: