css - TR :last-child not working

Question

可能是一些愚蠢的原因导致它不起作用，但我倾向于稍微弄乱 CSS。所以也许它也适用于其他人。 CSS:

.bet_history table {
    width: 1000px;
    display: block;
    border-collapse: collapse;
}
.bet_history td {
    padding: 0;
    font-size: 13px;
    text-align: center;
    padding-top: 1px;
    padding-bottom: 1px;
    background: #0361ba;
    color: #BDD6CE;
}
.bet_history tr {
    border-bottom: 1px solid black;
}
.bet_history tr:last-child {
    background: red;
}
.bet_history td.bet_history2 {
    color: #F0F0F0;
    width: 650px;
}
.bet_history td.bet_history1 {
    background-color: #0354a1;
    color: white;
    width: 100px;
    cursor: pointer;
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    transition:.5s;
}
.bet_history td.bet_history1:hover {
    color: #3399FF;
}

这是 HTML:已编辑!

<div id="main">

admin1<br />


<table class="bet_history">

<tr><td style="width: 250px;">Bet ID: #6. 09-22-2014 16:08</td><td class="bet_history1">Match ID #6</td><td class="bet_history2"><span style="color: #00FFFF;">10000</span> minerals on Cure(2.00). Your bet returned <span style="color: #00FFFF;">0</span> minerals. Better luck next time!</td></tr><tr><td style="width: 250px;">Bet ID: #5. 09-22-2014 16:06</td><td class="bet_history1">Match ID #4</td><td class="bet_history2"><span style="color: #00FFFF;">2222</span> minerals on Snute(2.30). Your bet returned <span style="color: #00FFFF;">5110.6</span> minerals. Congratulations!</td></tr><tr><td style="width: 250px;">Bet ID: #4. 09-22-2014 15:58</td><td class="bet_history1">Match ID #4</td><td class="bet_history2"><span style="color: #00FFFF;">2222</span> minerals on Snute(2.30). Your bet returned <span style="color: #00FFFF;">5110.6</span> minerals. Congratulations!</td></tr><tr><td style="width: 250px;">Bet ID: #3. 09-22-2014 15:25</td><td class="bet_history1">Match ID #5</td><td class="bet_history2"><span style="color: #00FFFF;">600</span> minerals on Lars(4.00). Your bet returned <span style="color: #00FFFF;">2400</span> minerals. Congratulations!</td></tr><tr><td style="width: 250px;">Bet ID: #2. 09-22-2014 12:03</td><td class="bet_history1">Match ID #3</td><td class="bet_history2"><span style="color: #00FFFF;">64</span> minerals on naniwa(9.00). Your bet returned <span style="color: #00FFFF;">576</span> minerals. Congratulations!</td></tr><tr><td style="width: 250px;">Bet ID: #1. 09-20-2014 16:00</td><td class="bet_history1">Match ID #1</td><td class="bet_history2"><span style="color: #00FFFF;">20</span> minerals on Snute(2.20). Your bet returned <span style="color: #00FFFF;">44</span> minerals. Congratulations!</td></tr>
</table>
</div>

为什么最后一个 child 没有申请最后一个tr？如果我将它设置为 td，它会。我确定这是我在 CSS 中做的一些愚蠢的事情。这不是成品。我只是想知道为什么最后一个 child 不工作。

Answer 1

正如@Vucko 在评论中提到的，应用了 tr:last-child 样式，但是该行中的 td 覆盖了该样式。

如果您希望最后一行中的所有 td 都为红色，请将您的类编辑为:

.bet_history tr:last-child td {
    background: red;
}

FIDDLE