如何在CSS中选择具有特定类名的元素的“最后一个孩子”？ [英] How do I select the “last child” of element with specific class name in CSS?

问题描述

我有一个HTML表，我想要的最后一行，除了 .table-bottom ，并删除 border-bottom ：

I have a HTML table and I want the last row excluding row with class .table-bottom, and remove its border-bottom:

<table cellpadding="0" cellspacing="0" style="width:752px;" class="table">
    <tr class="table-top"><th style="width:40px;">ID</th> <th>Post title</th> <th>Date</th> <th>Owner</th> <th style="width:100px;">Actions</th></tr>
    <tr class="table-middle"><td>1</td> <td>Test</td> <td>16.7.2013</td> <td>Admin</td> <td>Delete</td></tr>
    <tr class="table-middle"><td>2</td> <td>Test 2</td> <td>3.8.2013</td> <td>Admin</td> <td>Delete</td></tr>
    <tr class="table-bottom"><td colspan="5"></td></tr>
</table>

.table tr th {
color:#929191;
font-weight:bold;
font-size:14px;
text-align:left;
padding-left:19px;
border-right:1px solid #d7d7d7;
border-bottom:1px solid #d7d7d7;
}
.table tr th:last-child {
border-right:none;
}
.table tr td {
color:#929191;
font-weight:bold;
font-size:12px;
padding:19px;
border-right:1px solid #d7d7d7;
border-bottom:1px solid #d7d7d7;
}
.table tr td:last-child {
border-right:none;
}
.table .table-middle:last-of-type td {
border-bottom:none;
background:red;
}
.table tr.table-middle td:first-child {
text-align:center;
}
.table tr th:first-child {
text-align:center;
padding-left:0px;
}
.table tr.table-bottom td {
border-right:none;
border-bottom:none;
}

但是 .table .table-middle：last -of-type td 选择器不工作。

这里是 小提琴 。

Here is the Fiddle.

任何想法？

推荐答案

简短答案：除非您更改HTML结构，否则无法通过CSS执行。

Short answer: you can't do it by CSS, unless you change your HTML structure.

更多详情：

：last-of-type 伪类，

考虑这个选择器： .table-middle：last-of-type 。

而 .table-middle 正确指向元素， .table-middle 类不是其类型的最后一个兄弟，因为类型是指HTML元素本身，而不是 element.class 的组合。

while .table-middle points the element correctly, the element that has .table-middle class is NOT the last sibling of its type, because the term of type refers to the HTML element itself, not combination of element.class.

以下是正常的解决方案：

Here is the working solution:

HTML

<table cellpadding="0" cellspacing="0" style="width:752px;" class="table">
    <thead>
        <tr>
            <th style="width:40px;">ID</th>
            <th>Post title</th>
            <th>Date</th>
            <th>Owner</th>
            <th style="width:100px;">Actions</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <td colspan="5"></td>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td>1</td>
            <td>Test</td>
            <td>16.7.2013</td>
            <td>Admin</td>
            <td>Delete</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Test 2</td>
            <td>3.8.2013</td>
            <td>Admin</td>
            <td>Delete</td>
        </tr>        
    </tbody>
</table>

CSS

.table tbody tr:last-child td {
    border-bottom:none;
    background:red;
}

这里是 小提琴

Here is the Fiddle

这篇关于如何在CSS中选择具有特定类名的元素的“最后一个孩子”？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！