时间戳

首页 > 解决方案 > 如何使用 CSS 显示元素的单个实例？

html - 如何使用 CSS 显示元素的单个实例？

问题描述

编辑：问题是我正在使用反应，所以我不能使用另一个 div 包装这些元素，因为它们有很多父母。有没有办法查看页面中每个 div 具有类 .my-class 并显示它的最后一个实例。

我想更改最后一个 div 实例的背景颜色。在包含“第三”的代码 div 中。

https://jsfiddle.net/a694du2h/

但是第一个 div 也变成了红色。我知道这是因为他们没有同一个父母。有什么办法可以做我想做的事吗？

<html>

<head>
  <style>
    .my-class:last-of-type {
      background: #ff0000;
    }
  </style>
</head>

<body>
  <div>
    <div class='my-class'>first</div>
  </div>
  <div class='my-class'>second</div>
  <div class='my-class'>third</div>
</body>

</html>

标签： htmlcss

解决方案

将您的规则绑定到紧接在 body 父级之下的那些类。

body > .my-class:last-of-type {
  background: #ff0000;
}

https://jsfiddle.net/760Ljbca/

推荐阅读