CSS first-child 或 last-child 不能与类明智地一起使用吗？ [复制]

Question

也许这个问题很荒谬，但我想知道这个事实。我有一个带有两个类的li 元素（见下文），但它没有按我预期的那样工作。有人知道原因吗？

.red:first-child {
    color:#F00;
}
.blue:first-child {
    color:#00F; /* not working */
}
.red:last-child {
    color:#F00; /* not working */
}
.blue:last-child {
    color:#00F; 
}

<ul>
    <li class="red">one</li> <!-- This is the first child of red -->
    <li class="red">two</li>
    <li class="red">three</li>
    <li class="blue">one</li> <!-- and this first child of blue -->
    <li class="blue">two</li>
    <li class="blue">three</li>
</ul>

Answer 1

正如其他人所提到的， :first-child 正在按预期工作，作为父母的第一个孩子。

:first-child 选择器用于选择指定的选择器，仅当它是其父级的第一个子级时。

来源：CSS :first-child Selector

你可以像这样到达第一个 .blue：

.red + .blue

或者如果你想在 .red 之后得到所有的 .blue

.red ~ .blue

您可能希望使用 :first-of-type 选择第一个类型，但那些 .blue 必须是不同的 HTML 元素。

div.red:first-of-type {
    color:#F00;
}
div.red:last-of-type {
    color:#00F;
}
p.blue:first-of-type {
    color:#F00;
}
p.blue:last-of-type {
    color:#00F; 
}

<div>
    <div class="red">one</div>
    <div class="red">two</div>
    <div class="red">three</div>
    <p class="blue">one</p>
    <p class="blue">two</p>
    <p class="blue">three</p>
</div>

Answer 2

它不起作用，因为你对浏览器说的是（红色的情况，蓝色的情况类似）：

1. 找到所有元素.red。
2. 从 .red 元素列表中，选择第一个 (first-child)。
3. 给它应用红色。

浏览器按预期工作并将红色应用于列表的第一个元素。

编辑：

蓝色的情况是因为 CSS 总是寻找最精确的规则。如果两个规则具有相同的精度级别，则最后一个获胜，因此在这种情况下，最后一个 .blue:last-child 获胜，.blue:first-child 将被忽略。

Answer 3

因为它考虑李列表。首先，您必须提及第一个孩子，因此请先执行命令以显示红色。然后将最后一个代码作为蓝色最后一个孩子，因此将最后一个代码显示为蓝色。

它不考虑红色和蓝色类订单。它考虑了li list和periorities。