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

前端之家收集整理的这篇文章主要介绍了Css – 如何覆盖表格单元格的css前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
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;
}

在一个scenerio中,我想覆盖td样式,以便我可以在Table Cell文本前面显示一个图标图像.
因此,如果表格单元被定义为 – < td>车辆名称&详细信息< / td>

我想为这个表格单元格应用样式,以便它在文本前面显示图标图像 – ‘车辆名称&细节’.

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

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

添加到td作为< td class =“vehicle”>车辆名称&详细信息< / td>
但没有显示图标.该td的父表是< table class =“table”>

我错过了什么吗?

谢谢!

解决方法

.vehicle(一个类选择器)比.table td(一个类选择器一个类型选择器)少 specific.

你需要:

>一个更多的specific选择器(例如.table td.vehicle)
>一个规则集中同样为specific的选择器(例如td.vehicle),该规则集稍后出现在样式表中

猜你在找的CSS相关文章