的CSS - 如何覆盖CSS的表格单元格

CSS新手问题 -
我们与它的表格单元格沿为表定义的广义CSS：的CSS - 如何覆盖CSS的表格单元格

.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样式，以便我可以在表格单元格文本前面显示图标图像。所以，如果表格单元格被定义为 - <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">

我是否错过了什么？

谢谢！

来源

2011-08-05 iniki

这可能是浏览器问题。你在开发什么浏览器，测试和定位？ –

.vehicle（一级选择器）是少specific比.table td（一个类选择+一种类型的选择器）。

您需要用：

一个更specific选择（如.table td.vehicle）
的同样specific选择（如td.vehicle）在稍后出现在样式表中的规则集

来源

2011-08-05 12:19:49 Quentin

感谢您的回复......很好的解释。一个更复杂的查询 - 我如何让图标出现在文本之前，现在它与文本重叠。 – iniki

您必须在'.vehicle'类中添加一些填充，或者将图标添加为'img'并将其左移到文本中。 – karameloso

-1

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

来源

2011-08-05 12:16:21 Hybride

-1

尝试将背景位置替换为

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

您还可以更改不重复以进行调试以查看图像是否加载。

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

来源

2011-08-05 12:19:56 blejzz

更改您的选择器为td.vehicle也确保它出现在您的css文件中的.table td选择器之后。

您也可以使特殊TD的内联方式：

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

来源

2011-08-05 12:20:01 nobody

-1

它应该工作，确保到图像中的路线是正确的。同时请注意，这是您设置的背景图片，因此如果您不希望图片背后的文字需要使用填充 - >jsfiddle

来源

2011-08-05 12:22:12 jasalguero

我可以知道为什么在提供工作答案和工作示例后，我得到了一个投票吗？ – jasalguero

该示例仅适用于HTML，因此原始样式不匹配。即不是因为您将网址设置为正确的图像（它已经是），而是因为您停止了原先设置的背景。 – Quentin

啊，那是我的错，虽然没有评论的低估并不能帮助理解这样的事情。在这种情况下，Quentin的替代答案是使用css风格中的！important属性http://jsfiddle.net/jasalguero/aWAaD/2/虽然他更好 – jasalguero

的CSS - 如何覆盖CSS的表格单元格

回答

相关问题