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选择器用于选择指定的选择器，前提是它是父节点的第一个子节点。

来源：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

因为它考虑了Li列表。首先你必须提到第一个孩子，所以先拿命令显示红色。把最后一个代码作为蓝色的最后一个孩子，所以拿最后一个代码显示蓝色。

不考虑红色和蓝色类订单。它考虑了li列表和权力。

Answer 3

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

找到所有元素.red。
从.red元素列表中选择第一个元素（first-child）。
将红色涂抹在上面。

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

修改

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

CSS第一个孩子或最后一个孩子是否与班级合作？

3 个答案: