css - CSS：获取给定类的最后一个 HTML 标记，在一个列表中，不是每个 HTML 标记都有这个类

Question

这是我的已关闭问题的副本，但副本无关紧要

第一个“复制”

但是它不看类，只看类型，所以如果你碰巧有非文章具有相同的类，你会得到意想不到的结果

第二个“重复”完全是另一回事。

第三个“重复”是解释为什么我的尝试没有奏效。

第四个“重复”为第一个元素提供了解决方法，而不是最后一个。

我知道没有 CSS 选择器，我只是想要一个解决方案。在结束我的问题之前请注意这一点！

---

我有 5 个按钮。正如您将在片段中看到的那样，它们有一个底层，使它们看起来很活跃。

每个按钮都可以有一个活动状态，但只能从 1 开始，到 5 结束。

它们都有一个分隔线，在片段中以红色显示。

我想将分隔线保留在底层之外，在底层之外，但我想让它在底层的末尾消失（在代码片段中，在按钮 #2 之后）。

在我的第一个问题之后，我了解到没有 CSS 选择器可以做到这一点。那么解决这个问题的最佳方法是什么？

.container {
  display: flex;
  align-items: stretch;
  justify-content: start
  margin: 12px;
  position: relative;
}

button:after {
  content: '';
  height: 100%;
  position: absolute;
  background: red;
  left: calc(100% + 12px);
  width: 1px;
  top: 0;
}

button.active:last-child:after {
  content: none;
}

button {
  flex: 0 0 calc(20% - 24px);
  border: 0;
  height: 32px;
  color: black;
  text-transform: uppercase;
  text-align: center;
  margin-right: 24px;
  background: transparent;
  position: relative;
}

button.active {
  color: white;
}

.active-pill {
  background: teal;
  position: absolute;
  height: 32px;
  border-radius: 16px;
  background: teal;
  width: calc(40% - 12px);
  z-index: -1;
}

<div class="container">

  <div class="active-pill"></div>
  
  <button class="active">Step 1</button>
  <button class="active">Step 2</button>
  <button>Step 3</button>
  <button>Step 4</button>
  <button>Step 5</button>
</div>

<h3>
  Which selector to use to remove the content after button #2 ?
</h3>

标签： csscss-selectorspseudo-element

Answer 1

在这种特殊情况下：只需将分隔线放在按钮的左侧，而不是右侧？

然后不需要一个的，成为活动之后的第一个非活动的，所以可以很容易地使用button.active + button:not(.active):after

从技术上讲，这里的第一个按钮在左侧也有一个分隔线，无论如何，当片段被渲染时，它就会在这里被切断。但是在您需要明确“消除”它的情况下，您仍然可以:first-child在这里简单明了地使用（我假设如果有活动按钮，它总是从第一个按钮开始，对吧？）

这与 Hao 在他们的回答中建议的有点相似，但在他们的版本中，分隔线被放置在某些按钮的右侧，在其他按钮的左侧......我更愿意简单地将它放在所有按钮上。

.container {
  display: flex;
  align-items: stretch;
  justify-content: start
  margin: 12px;
  position: relative;
}

button:after {
  content: '';
  height: 100%;
  position: absolute;
  background: red;
  right: calc(100% + 12px);
  width: 1px;
  top: 0;
}

button.active + button:not(.active):after {
  content: none;
}

button {
  flex: 0 0 calc(20% - 24px);
  border: 0;
  height: 32px;
  color: black;
  text-transform: uppercase;
  text-align: center;
  margin-right: 24px;
  background: transparent;
  position: relative;
}

button.active {
  color: white;
}

.active-pill {
  background: teal;
  position: absolute;
  height: 32px;
  border-radius: 16px;
  background: teal;
  width: calc(40% - 12px);
  z-index: -1;
}

<div class="container">

  <div class="active-pill"></div>
  
  <button class="active">Step 1</button>
  <button class="active">Step 2</button>
  <button>Step 3</button>
  <button>Step 4</button>
  <button>Step 5</button>
</div>

<h3>
  Which selector to use to remove the content after button #2 ?
</h3>