4

我有一些看起来像这样的 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它对某个类的最后一个孩子进行了操作，但如果它属于同一类，它实际上对容器的最后一个孩子进行了操作。

有什么方便的方法吗？我知道我可以在MyClassdiv 周围添加一个包装器并将阴影的 CSS 添加到包装器中，但我想知道是否有更好的方法来做到这一点。

谢谢。

4

2 回答 2

8

既然您已经尝试过使用 CSS3 选择器，那么这是要使用的正确伪类

.MyClass:last-of-type

根据CSS3 规范（至少据我所知），这应该可以工作，但似乎没有。至少在最新的 Chrome (v23) 和 Firefox (v17) 浏览器版本中没有。

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

额外调查

这是一个 JSFiddle，它显示了这个伪类选择器的实际工作方式：

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

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

这似乎在 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 类的最后一个元素。

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

于 2012-11-22T17:44:11.547 回答
1

看起来 last-of-type 只有在您使最后一个元素与其他元素不同时才会对您有所帮助，类名在这里似乎并不相关。这个例子确实正确地显示了两个红色方块，一个绿色，一个蓝色。


.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>
于 2012-11-22T17:36:45.177 回答