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

Question

css newbie question -
我们为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;
}

在一个scenerio中,我想覆盖td样式,以便我可以在Table Cell文本前面显示一个图标图像.所以,如果表格单元被定义为 - <td> Vehicle Name & Details </td>

我想为这个表格单元格应用样式,以便它还在文本前面显示图标图像 - "车辆名称和详细信息".

我在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(一个类选择器)不是 特定于.table td(一个类选择器+一个类型选择器).

你需要:

• 一个更 具体的选择器(例如.table td.vehicle)
• 一个同样 的特定选择器(例如td.vehicle在规则集),该后来出现在样式表中