Warum funktioniert das letzte Kind nicht?

Question

Ich versuche, meine Tabelle TD einen Rand-Boden abgesehen von der letzten td geben. Wo gehe ich falsch?

CSS

.rack { 
    border-left: 15px solid #959595; 
} 

.rack td { 
    border-bottom: 15px solid #f05f28; 
    width:100%; 
} 

.rack td:last-child { 
    border-bottom: none; 
} 

HTML

<table class="rack" width="600" border="0" cellspacing="0" cellpadding="0"> 
    <tr> 
    <td>&nbsp;</td> 
    </tr> 
    <tr> 
    <td>&nbsp;</td> 
    </tr> 
    <tr> 
    <td>&nbsp;</td> 
    </tr> 
</table> 

FIDDLE

Answer 1

Sie .rack td:last-child mit .rack tr:last-child td ersetzen soll. :last-child ist das letzte Kind relativ zu ihrem jeweiligen Mutterelement angelegt, so dass Sie wollen die td der letzten tr auszuwählen.

Answer 2

Das Problem ist, dass Sie Missverständnis, wie die :last-child Selektor funktioniert.

Nach MDN:

Die :last-child CSS Pseudo-Klasse steht für ein beliebiges Element, das das letzte Kind Element seiner Eltern ist.

Was machst du mit .rack td:last-child ist die <td> auswählen, die das letzte Kind von ihm ist der Mutter <tr>, alle von ihnen bedeutet.

einfach die <tr> auswählen, die ist :last-child (oder :last-of-type), dann wählen Sie es Kind ist <td>:

.rack tr:last-child td { 
    border-bottom: none; 
} 

JSFiddle Demo