CSS-如何覆盖表格单元格的CSS [英] Css - How to override css for a table cell

问题描述

css新手问题-
我们为表及其表单元格定义了一个通用的css:

css newbie question -
we have a generalized css defined for Table along with its Table Cells as:

.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>车辆名称和名称详细信息</td>

In one scenerio, I want to override td style so that I can show an icon image in front of Table Cell text. so, if Table Cell is defined as - <td> Vehicle Name & Details </td>

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

I want to apply style for this Table Cell so that it also show icon image in front of text - 'Vehicle Name & Details'.

我在CSS文件中添加了此样式-

I added this style in css file -

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

并作为< td class ="vehicle">添加到td中；车辆名称和名称详细信息</td> 但没有显示任何图标.此td的父表是< table class ="table">

and added to td as <td class="vehicle"> Vehicle Name & Details </td> but no icon is being shown. Parent table of this td is <table class="table">

我想念什么吗?

谢谢！

推荐答案

.vehicle (一个类选择器) less

.vehicle (one class selector) is less specific than .table td (one class selector + one type selector).

您需要:

• a 更多 特定选择器(例如 .table td.vehicle )
• 一个相等 特定选择器(例如 td.vehicle )，该规则集中出现在样式表的后面

• a more specific selector (e.g. .table td.vehicle)
• an equally specific selector (e.g. td.vehicle) in a rule-set that appears later in the stylesheet

这篇关于CSS-如何覆盖表格单元格的CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！