Question

<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，我如何进入表tr td：first-child，table tr th：这个表的第一个孩子？样式表通常具有表格的基本样式，我需要更改此特定表格上的填充。

由于

Answer 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.

Answer 2

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

tr td:last-child

请记住:last-child是CSS3。因此，旧版浏览器（＆lt; IE 9）

不支持它

Answer 3

你已经给出了答案。

这应该完全正常。

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

}

你能详细说明这个问题吗？

Answer 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（来自表响应类），所以你可能需要添加几个项才能实现这个功能。

如何选择此表的第一个和最后一个孩子？

4 个答案: