子CSS样式覆盖

Question

假设我们有如下的Html结构。

<table class="main-tb">
<tr>
<td>
</td>
<td id ="mytd">
</td>
</tr>
</table>

并且应用的css文件定义如下。

.main-tb 
{
    font-size: 13px; 
    line-height: 20px;
    padding: 5px 10px;

}
.main-tb th 
{
    background-color: #F8F8F8;
    border-color: #CCCCCC -moz-use-text-color;
    border-style: solid none;
    border-width: 1px 0;
    line-height: 22px;
    padding: 5px 10px;    
}

.main-tb td 
{
    border-color: #CCCCCC;
    border-style: dotted;
    border-width: 0 0 1px;/**/
    line-height: 22px;
    padding: 5px 10px;
}

我们可以看到.main-tb td样式应用于表中的所有td元素。 现在，如果我想将不同的样式应用于名为mytd的td元素之一，就像从.main-tb td中删除边框颜色和边框宽度一样。那么，我该怎么办？谢谢。

Answer 1

#mytd比.main-tb td更具体，因此您只需从#mytd移除边框。

#mytd {
    border: 0 none;
}

Answer 2

您可以使用.main-tb td #mytd或#mytd选择该元素（因为ID是唯一的），并使用border: 0;删除边框。

Answer 3

在课堂上使用!important

#mytd {
    border-color: #fff !important;
    OR
    border-color: transparent !important;    
}