Question

我刚刚发现CSS类是否由子选择器定义，例如'：last-child'，非最后一个孩子将意外地应用该课程。在我看来，span.item也是div.list的孩子，而不是直接的。我的代码如下。那么：最后一个孩子，：第一个孩子和第n个孩子只为直接孩子工作？如果是真的，有没有办法让它按预期工作？

<style>
.list .item {
    color: green;    
}
.list .item:last-child {
    color: red;
}
</style>

<div class="list">
    <p class="item">Clothes</p> <!-- GREEN -->
    <p class="item">Shoes</p> <!-- RED -->
    <p><span class="item">Clothes</span></p> <!-- RED, which is expected to show green text -->
    <p><span class="item">Shoes</span></p> <!-- RED -->
</div>

添加了更多。谢谢所有回复的人。我在这里提供的例子非常简单，事实上我在工作中遇到了一个更复杂的案例。如果类'item'必须应用于后代元素而不是直接子元素。我可以在这里使当前样本更复杂。

<style>
.list .item {
    color: green;
    padding: 10px;
}
.list .item:last-child {
    color: red;
}

.item-detail {
    color: yellow;
    padding: 15px;
}
</style>

<div class="list">
    <p class="item">Clothes</p> <!-- GREEN -->
    <p class="item">Shoes</p> <!-- RED -->
    <p class="item-detail">
        Show detailed info of following item. <!-- YELLOW-->
        <span class="item">Clothes</span> <!-- RED, which is expected to show green text -->
    </p>
    <p><span class="item">Shoes</span></p> <!-- RED -->
</div>

Answer 1

实际上是预期的：您的<span class="item">是其父母的最后一个孩子（请参阅this article on css-tricks。

Shoes p也是其家长item的最后一个孩子，因此应该受到影响。

奇怪的是，在jsfiddle中测试代码时，我看到 Shoes 是绿色的，当我希望看到它像你看起来那样红。

Answer 2

这是因为它与它的父母有关。在这种情况下，它在p元素内。所以span.item是第一个也是最后一个孩子。所以p元素中的span.item都是红色的。

如果您希望最后一项为红色，无论是p还是p内的跨度，请使用：

.list p:last-child, .list p:last-child span {
    color: red;
}

Answer 3

:last-child CSS伪类表示任何元素，它是父的最后一个子元素。

对于<p><span class="item">Clothes</span></p>，<span class="item">Clothes</span>是其父级的最后一个子元素，即<p>元素。

只需在class上定义<p>，它就会按预期运作：

<div class="list">
    <p class="item">Clothes</p> 
    <p class="item">Shoes</p>
    <p class="item"><span>Clothes</span></p>
    <p class="item"><span>Shoes</span></p> <!-- RED -->
</div>

Answer 4

:last-child或说:last-of-type的问题是他们不尊重班级......

正如我在此处看到的模式，您正在尝试交替应用颜色，因此您可以使用nth-of-type(even)伪

.list p:nth-of-type(even) {
    color: red;
}

.list p {
    color: green;
}

Demo

现在我将解释您的选择器如何工作，您有.list .item表示它会将颜色应用于嵌套在p元素内的span和class .list。

很好，关于第二个选择器.list .item:last-child将选择嵌套在p元素内的最后一个子节点。正如我所说，它不会尊重这些类......因为span是last-child p，p会被选中。

如果您愿意更改标记，请将div元素包含在<div class="list"> <div> <p class="item">Clothes</p>  <p class="item">Clothes</p>  <p class="item">Shoes</p>  </div> <div> <p class="item">Clothes</p>  <p class="item">Shoes</p>  </div> </div>

中

<强> HTML

.list > div p:last-child {
    color: red;
}

.list p {
    color: green;
}

<强> CSS

{{1}}

Demo

Answer 5

<style>
.list .item {
    color:green;    
}
.list .item:last-child{
    color: red;
}
</style>

<div class="list">
    <p class="item">Clothes</p> <!-- GREEN -->
    <p class="item">Shoes</p> <!-- RED -->
    <p class="item">Clothes</p> <!-- RED, which is expected to show green text -->
    <p class="item">Shoes</p> <!-- RED -->
</div>

知道了吗？

非最后一个孩子应用由以下定义的CSS样式：last-child

5 个答案: