CSS类选择器不工作，但标签和类选择器

Question

当我使用类选择器来修改元素的宽度时，它不起作用。当我使用table.change-name中的标记和类选择器时，它确实有效。

HTML：

        <!-- start settings -->
        <div class='settings'>
            <h4>Account Settings</h4>
            <table class='options'>
                <tr>
                    <td class='name username'>Name</td>
                    <td class='value'>Robert Rocha</td>
                    <td class='edit'><a href='#'>Edit</a></td>
                </tr>
                <tr>
                    <td class='name email'>Email</td>
                    <td class='value'>tom@gmail.com</td>
                    <td class='edit'><a href='#'>Edit</a></td>
                </tr>
                <tr>
                    <td class='name pword' colspan='2'>Password</td>
                    <td class='edit'><a href='#'>Edit</a></td>
                </tr>
                <tr>
                    <td class='name remove-all' colspan='3'><a href='#'>Delete All Photos</a></td>
                </tr>
                <tr>
                    <td class='name remove-account' colspan='3'><a href='#'>Delete Account</a></td>
                </tr>
            </table>




            <table class='change-name'>
                <tr>
                    <td class='first'>First</td>
                    <td><input type='text' name='fname' class='fname'></td>
                </tr>
                <tr>
                    <td class='middle'>Middle</td>
                    <td><input type='text' name='mname' class='mname'></td>
                </tr>
                <tr>
                    <td class='last'>Last</td>
                    <td><input type='text' name='lname' class='lname'></td>
                </tr>
                <tr>
                    <td class='save'><a href='#'>Save</a></td>
                    <td class='cancel'><a href='#'>Cancel</a></td>
                </tr>
            </table>

        </div>
        <!-- end settings -->

CSS：

/* Settings */

.settings {
    width: 650px;
    margin: 0 auto;
    padding: 1em;
}

.settings h4 {
    padding: 1em 0;
    letter-spacing: 1px;
    border-bottom: 1px solid #cacece;
}

.settings table { 
    width: 100%;
    font-size: 0.9em;
    letter-spacing: 1px;
    font-weight: 200;
    table-layout: fixed;
}

.settings tr { border-bottom: 1px solid #cacece; }
.settings td { padding: 0.5em 0; }
.settings .edit { text-align: right; }
.settings .name { font-weight: bold; }
.settings .remove-all, .settings .remove-account { font-weight: 200; }

/* Change Name Table */

.change-name {
    background: #cacece;
    width: 300px;
}

.change-name tr { border: none; }

结果：https://jsfiddle.net/yy1mu2ze/

如果我执行以下操作：

table.change-name {
    background: #cacece;
    width: 300px;
}

我得到：https://jsfiddle.net/yy1mu2ze/1/

为什么会这样？