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要素にスタイルが適用されていることがわかります。mytdここで、border-colorとborder-widthをから削除するなど、という名前のtd要素の1つに異なるスタイルを適用したい場合.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;    
}