如何在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屋!