css last-child在添加不同类的div时不起作用

Question

我有一些看起来像这样的HTML：

<div class="SomeContainer">
    <div class="MyClass"></div>
    <div class="MyClass"></div>
    <div class="MyClass"></div>
    <div class="MyOtherClass"></div>
</div>

我使用以下CSS

.MyClass{...}
.MyClass:last-child{box-shadow:0px 5px 10px black;}

我错误地认为last-child对某个班级的最后一个孩子进行了操作，但如果它属于同一个班级，它实际上是对容器的最后一个孩子进行操作。

有一些方便的方法吗？我知道我可以在MyClass div周围添加一个包装器，并将阴影的CSS添加到包装器中，但我想知道是否有更好的方法。

感谢。

Answer 1

既然你已经尝试过使用CSS3选择器，那么<​​strike>这是正确使用的伪类

.MyClass:last-of-type

根据CSS3 specification（至少据我所知），这应该有效，但似乎没有。至少不是最新的Chrome（v23）和Firefox（v17）浏览器版本。

  

警告：上层信息不起作用，并且可能误导为此问题有一个纯CSS解决方案......因为CSS3没有。另一方面，CSS4将有一个额外的伪类:nth-last-match(n)，可能会涵盖这个确切的场景。但是，现在说不是所有的CSS3选择器都是由浏览器实现的还为时过早。

其他调查

Here's a JSFiddle显示了这个伪类选择器的实际工作方式：

1. 获取满足CSS选择器的所有元素（无伪）
2. 获取不同的HTML元素类型（标签）
3. 为每个类型（标记）组选择相同类型（标记）的所有同级元素
4. 将每个类型（标记）组缩减为组中的最后一个元素
5. 这个（每组的）剩余元素是否满足选择器（没有伪）？
6. 如果 true ，则应用样式，否则不要

这意味着（如我的例子所示）几个兄弟元素可以满足这个选择器，只要它们的类型不同。

这似乎在Chrome和Firefox中的工作方式相同。如果我们仔细阅读规范，它会说

  

:last-of-type伪类表示一个元素，该元素是其父元素子元素列表中其类型的最后一个兄弟。

如果它说最后一个兄弟姐妹满足选择器那么我的上层解决方案就可以了。所以让我们测试一下我的步骤。

使用HTML

运行步骤
1. 获得前3个元素
2. 只有一种类型：div
3. 四个元素（包括最后一个元素）
4. 缩减到最后一个
5. 满足？ 否
6. 不设置样式

我小提琴中的其他几个例子

为了测试这个伪类选择器的行为，我添加了两个额外的例子。这是HTML：

<!-- First -->
<div class="SomeContainer">
    <div class="MyClass">Content</div>
    <div class="MyClass">Content</div> 
    <p class="MyClass">Content</p>
    <p class="MyClass">Content</p>
</div>

<!-- Second -->
<div class="SomeContainer">
    <div class="MyClass">Content</div>
    <div class="MyClass">Content</div>
    <div class="MyClass">Content</div>
    <p class="MyOtherClass">Content</p>
</div>

在第一个元素中，两个元素满足选择器（最后div和最后p） 在第二个元素中，一个元素满足选择器（最后div）

结果

使用您提供的HTML并假设可能存在具有.MyClass的任意数量的元素，因此无法在CSS3中编写通用选择器，该选择器实际上将使用特定CSS类定位最后一个元素。

最好的方法是向表示具有特定类的最后一个元素的元素添加其他类，并编写一个选择器来定位它。

Answer 2

看起来最后一个类型只会帮助你，如果你让你的最后一个元素与其余元素不一样，那么类名在这里似乎并不相关。此示例正确显示两个红色正方形，一个绿色，一个蓝色。

.SomeContainer > div, .SomeContainer > span { width: 20px; height: 20px; background: red}
.SomeContainer > div:last-of-type {background: green}
.SomeContainer > span:last-child {box-shadow:0px 5px 10px black; background: blue; display: block}

<div class="SomeContainer">
    <div class="MyClass"></div>
    <div class="MyClass"></div>
    <div class="MyClass"></div>
    <span class="MyOtherClass"></span>
</div>