Question

由于某种原因，我无法让最后一个子选择器工作

小提琴就在这里 - https://jsfiddle.net/1aawd1vL/7/

第一个孩子正在为bg红色着色，但最后一个孩子没有工作，有什么想法吗？

<key>NSLocationAlwaysUsageDescription</key>
<string>Need to use location services</string>

也试过最后一个

.moohighlight:first-child td {background:red;}

.moohighlight:last-child td {background:green;}

Answer 1

.moohighlight不是last-child。所以请改为:last-of-type：

.moohighlight:first-child td {background:red;}
tr:last-of-type td {background:green;}

或者：

.moohighlight:first-child td {background:red;}
tr:last-child td {background:green;}

小提琴：https://jsfiddle.net/1aawd1vL/17/

但请注意，last-of-type选择器只能选择元素，而不能选择类。它尚未实施。

Answer 2

The :last-child CSS pseudo-class represents any element that is the last child element of its parent.这意味着它不会查看类，而是查看父级的容器，然后查找最后一个子元素，然后检查它是否有类。

您可以专门为tbody元素组使用其他.moohighlight，然后您可以使用:first-child 和 :last-child，因为它是父母而不是选择者的主题：

tbody.moohighlight tr:first-child td {
    background:red;
}
tbody.moohighlight tr:last-child td {
    background:green;
}

<div class="draft_picks_container" id="draft_picks_container">
    <table class="report nocaption commishview" align="center" cellspacing="1">
        <tbody class='moohighlight'>
            <tr style="background-color: rgb(255, 255, 255);" classname="moohighlight" class="moohighlight" id="pick_01_01">
                <td class="pick">1.01</td>
                <td class="franchise fname0006">Chocolate Thunder</td>
                <td class="selection">Bell, Le'Veon PIT RB</td>
                <td class="timestamp">3:13:14 p.m.</td>
            </tr>
            <tr style="background-color: rgb(255, 255, 255); background-position: 0px 0px; color: rgb(38, 62, 104);" classname="moohighlight" class="moohighlight" id="pick_01_02">
                <td class="pick">1.02</td>
                <td class="franchise fname0003">VACANT TEAM - 2nd pick</td>
                <td class="selection">Jeffery, Alshon CHI WR</td>
                <td class="timestamp">3:13:15 p.m.</td>
            </tr>
            <tr style="background-color: rgb(255, 255, 255); background-position: 0px 0px; color: rgb(38, 62, 104);" classname="moohighlight" class="moohighlight" id="pick_01_02">
                <td class="pick">1.02</td>
                <td class="franchise fname0003">VACANT TEAM - 2nd pick</td>
                <td class="selection">Jeffery, Alshon CHI WR</td>
                <td class="timestamp">3:13:15 p.m.</td>
            </tr>
        </tbody>
        <tbody>
            <tr classname="oddtablerow" class="oddtablerow" id="pick_01_03">
            ... Other rows here ...

https://jsfiddle.net/1aawd1vL/59/

CSS最后一个孩子不像第一个孩子那样工作

2 个答案: