除了第一个和最后一个<tr>之外,我如何定位<td>和<th>？

Question

我怎么可以针对一些子元素,除了在母公司是第一个或最后一个孩子的家长吗？

请参阅我的CSS中的评论,以便更好地了解我的意思.

CSS:

/* Always apply */
tr th, tr td
{
    text-align: left;
    vertical-align: top;
}

/* Apply to all except first <tr> */
tr th, tr td
{
    padding-top: 5px;
}

/* Apply to all except last <tr> */
tr th, tr td
{
    border-bottom: 1px solid #c4c4c4;
    padding-bottom: 5px;
}

HTML:

<table>
    <tr>
        <th>Born</th>
        <td><time datetime="1986-11-05">5<sup>th</sup> November 1986</time></td>
    </tr>
    <tr>
        <th>Gender</th>
        <td>Male</td>
    </tr>
    <tr>
        <th>Sports</th>
        <td>Football<br />Tennis</td>
    </tr>
    <tr>
        <th>Teams</th>
        <td>Liverpool FC<br />Spain FC</td>
    </tr>
</table>

Answer 1

那么你就可以解决你所链接的问题.使用:not()伪类:

/* Apply to all except first <tr> */
tr:not(:first-child) th, tr:not(:first-child) td{
    padding-top: 5px;
}

/* Apply to all except last <tr> */
tr:not(:last-child) th, tr:not(:last-child) td{
    border-bottom: 1px solid #c4c4c4;
    padding-bottom: 5px;
}

小提琴

(虽然这不适用于IE 8)

IE 7+的替代方案,如果边框样式可以更改:

/* Apply to all */
tr th, tr td{
    border-top: 1px solid #c4c4c4;
    padding-top: 5px;
}

/* Remove styles from first */
tr:first-child th, tr:first-child td{
    border-top: 0;
    padding-top: 0;
}

要么

/* Apply to all but first */
tr + tr th, tr + tr td{
    border-top: 1px solid #c4c4c4;
    padding-top: 5px;
}

(但不确定+IE 7是否支持)