如何选择该表的第一个和最后一个孩子？答案

【问题标题】：How to select first and last child of this table?如何选择该表的第一个和最后一个孩子？
【发布时间】：2013-12-21 22:06:43
【问题描述】：

<div class="showtable-page">
    <table class="layout display responsive-table">
        <thead>
            <tr><th>Show</th><th>Address</th><th>Location</th><th>Dates &amp; Hours</th></tr>
        </thead>
        <tbody>
            <tr>
                <td class="organisationnumber">ABC</td>
                <td>
                    <ul style="list-style-type: none;">
                        <li>KLM</li>
                        <li>OPQ</li>
                    </ul>
                </td>
                <td>US</td>
                <td>Mon-Fri 9AM - 6PM</td>
            </tr>

对于 CSS，我如何获取 table tr td:first-child, table tr th:first-child 这个表？样式表通常具有表格的基本样式，我需要更改此特定表格的填充。

谢谢

【问题讨论】：

table tr td:first-child, table tr th:first-child 有什么问题？还是你想要第一行？然后table tr:first-child td, table tr:first-child th

标签： html css css-selectors html-table

【解决方案1】：

给这张桌子ID说mytable。

id 属性为 HTML 元素指定一个唯一的 id。

试试：

HTML：

<table id="mytable" class="layout display responsive-table">

CSS：

#mytable th:first-child{
    /* your styles*/
}
#mytable td:first-child{
    /* your styles*/
}

DEMO here.

【讨论】：

【解决方案2】：

例如，选择您需要的最后一个孩子：

tr td:last-child

请记住 :last-child 是 CSS3。所以旧版浏览器不支持（

【讨论】：

【解决方案3】：

你已经给出了答案。

这应该可以正常工作。

table tr td:first-child, table tr th:first-child{

}

你能详细说明这有什么问题吗？

【讨论】：

【解决方案4】：

使用类选择器，或者如果需要，在表格中添加一个 ID 并使用它（尽管我倾向于避免在 CSS 中使用 ID 选择器）。

CSS 看起来像这样：

.layout.display.responsive-table th:first-child
{
    /* your css here */
}

.layout.display.responsive-table td:first-child
{
    /* your css here */
}

如果这不起作用，请查看this article 以了解如何用您的选择器覆盖其他选择器。看起来您正在使用 Bootstrap（来自表格响应类），因此您可能需要添加几个项目才能使其正常工作。

【讨论】：