css - 子 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 元素。现在，如果我想对名为 的 td 元素之一应用不同的样式mytd，例如从.main-tb td. 那么，我该怎么办？谢谢。

Answer 1

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

#mytd {
    border: 0 none;
}

Answer 2

.main-tb td #mytd您可以简单地使用or选择该元素#mytd（因为 id 是唯一的）并用于border: 0;删除边框。

Answer 3

!important在课堂上使用

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