使用CSS3选择器无法在TR中获得第一个td

Question

I am having an issue selecting the first td in the tr on a table that is being created.

I am using

.record_list tbody tr td:first-child { text-align: center; }

and that does not work. No styles are being applied.

here is the html, im trying to get the td with the check mark.

<table class="records_list">
        <thead>
            <tr>
                <th>✔</th>
                <th>Title</th>
                <th>Notes</th>
                <th>Project</th>
                <th>Context</th>
                <th>Flagged</th>
                <th>Deferuntil</th>
                <th>Due</th>
                <th>Repeattask</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>✔</td>
                <td>This is another task title</td>
                <td>this is another note that will go with this task, just so nothing is forgotten.</td>
                <td>secondproject</td>
                <td>secontcontext</td>
                <td>1</td>
                <td></td>
                <td>2014-02-12 08:17:00</td>
                <td></td>
                <td>
                <ul>
                    <li>
                        <a href="/workspace/symfony/web/task/10">View</a>
                    </li>
                    <li>
                        <a href="/workspace/symfony/web/task/10/edit">Edit</a>
                    </li>
                </ul>
                </td>
            </tr>
                    <tr>
                                <td></td>
                <td>Lorem ipsum dolor sit amet</td>
                                <td>this is a note that will describe anything that needs to be remembered about the note.</td>
                <td>thisisaproject</td>
                <td>thisisacontext</td>
                <td>1</td>
                <td></td>
                <td></td>
                <td></td>
                <td>
                <ul>
                    <li>
                        <a href="/workspace/symfony/web/task/9">View</a>
                    </li>
                    <li>
                        <a href="/workspace/symfony/web/task/9/edit">Edit</a>
                    </li>
                </ul>
                </td>
            </tr>
                </tbody>
    </table>

Answer 1

you have .record_list up there in your example but .records_list in your HTML. Is this what you're looking for?

JSFIDDLE

Answer 2

You have a typo records_list:

Change:

.record_list tbody tr td:first-child { text-align: center; }

With:

.records_list tbody tr td:first-child { text-align: center; }

Answer 3

You forgot the "s" to .record_list :)

.records_list tbody tr td:first-child{ background: red; }

FIDDLE

Answer 4

这是一个错误类型.record_list而不是.records_list