如何在CSS中选择具有特定类名的元素的“最后一个孩子”？

Question

我有一个HTML表，我想最后一排排除与.table-bottom类行，并删除其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选择不工作。

这是Fiddle。

任何想法？

Answer 1

简短回答：除非您更改HTML结构，否则无法通过CSS来完成。

的更多细节：

:last-of-type伪类，表示这是它在它的父元素的子元素的列表类型的最后一个侧边的元件。

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

而.table-middle点元素正确，有.table-middle类的元素不是其type的最后一个兄弟姐妹，因为type术语指的是HTML元素本身，而不是element.class组合。

---

这里是工作的解决方案：

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; 
} 

这里是Fiddle

Answer 2

你可以把它简单得多，而无需使用类都：

HTML：

<table> 
    <tr> 
     <td>...</td> 
     <td>...</td> 
     <td>...</td> 
     <td>...</td> 
     <td>...</td> 
    </tr> 
    <tr> 
     <td>...</td> 
     <td>...</td> 
     <td>...</td> 
     <td>...</td> 
     <td>...</td> 
    </tr> 
    <tr> 
     <td>...</td> 
     <td>...</td> 
     <td>...</td> 
     <td>...</td> 
     <td>...</td> 
    </tr> 
    <tr> 
     <td>...</td> 
     <td>...</td> 
     <td>...</td> 
     <td>...</td> 
     <td>...</td> 
    </tr> 
</table> 

CSS：

table { 
    width: 500px; 
} 
table td { /* style for all the cells between the top and bottom row */ 
    background: red; 
} 
table tr:first-child td { /* style for the cells in the top row */ 
    background: green; 
} 
table tr:last-child td { /* style for the cells in the bottom row */ 
    background: blue; 
} 
table tr:first-child td:first-child, /* first row, first cell */ 
table tr:first-child td:last-child, /* first row, last cell */ 
table tr:last-child td:first-child, /* last row, first cell */ 
table tr:last-child td:last-child { /* last row, last cell */ 
    background: yellow; 
} 

另外，还要检查working JSFiddle。