如何在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。