CSSで反映されないClassを上書きする方法

CSSで同じ名前でclassを定義していると先に書かれている方が反映されてしまいます。

ただし、親から指定する書き方を使用するとclassが同じでも上書きすることが可能です。
ベースのCSSは決まっているが、例外的に異なるデザインにする時などに使えますね。

【HTML】
　<table>
        <tr>
            <td>table</td>
            <td>table</td>
        </tr>
        <tr>
            <td>table</td>
            <td class="aaa">table</td>
        </tr>
    </table>

    <br>

    <table class="ta">
        <tr>
            <td>table</td>
            <td>table</td>
        </tr>
        <tr>
            <td>table</td>
            <td class="aaa">table</td>
        </tr>
    </table>

【CSS】  
  table {
        width: 400px;
        height: 150px;
        border-collapse: collapse;
    }

    td {
        border: 1px solid #000000;
    }

        td.aaa {
            background-color: #008000;
        }

    table.ta {
        width: 200px;
    }

        table.ta td.aaa {
            background-color: #00ced1;
        }

2つのテーブルのtdはどちらもclass=aaaで指定してありますが、色が異なります。
親要素から指定してあげることで異なる設定をすることが出来ます。