如何仅在最后一个元素的样式之后重置CSS ::

Question

我使用:after,并:before在我的事件CSS.我有一个名为时间轴的按钮.当我点击时间轴按钮时,它会添加一个事件并使用:after我连接这个看起来不错的事件,但我希望在效果后删除最后一个事件.

在这里,我粘贴我正常工作的代码我正在添加一个图像,显示出现了什么问题.

这是我的代码:

div[type="timeline"]>section {
  margin: auto;
  width: 900px;
  z-index: 100;
  opacity: 0.5;
  border-left: 4px solid #00BCD4;
  border-top: 1px solid grey;
  min-height: 250px;
  background-color: #b3e5fc2b;
  border-radius: 4px;
  margin-bottom: 55px;
  position: relative;
  top: 50px;
  box-shadow: rgb(136, 136, 136) 3px 3px 1px;
  -webkit-animation: fadein 2s -moz-animation: fadein 2s;
  -ms-animation: fadein 2s;
  -o-animation: fadein 2s;
  animation: fadein 2s;
}

div[type="timeline"]>section:hover {
  opacity: 1;
}

div[type="timeline"]::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  bottom: 0;
  width: .2rem;
  background: white;
  height: 55px;
}

div[type="timeline"]>section::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -55px;
  width: .2rem;
  background: grey;
  height: 55px;
}

div[type="timeline"]>section>header {
  font-weight: 600;
  color: cadetblue;
  transform: translate(16px, 23px);
  font-size: 34px;
  font-family: arial;
  position: relative;
}

div[type="timeline"]>section>article {
  transform: translate(12px, 14px);
  color: black;
  font-size: 22px;
  font-family: arial;
  position: relative;
  padding: 10px;
  word-wrap: break-word;
}

<div type='timeline' id='slide'>
  <section>
    <header>Title One</header>
    <article>Content</article>
  </section>
  <section>
    <header>Title Two</header>
    <article>Content</article>
  </section>
  <section>
    <header>Title Three</header>
    <article>Content</article>
  </section>
  <section>
    <header>Title Four</header>
    <article>Content</article>
  </section>
</div>

Answer 1

您可以使用:last-of-type,:last-child,:nth-last-of-type(1)或:nth-last-child(1)目标的最后section,并在其复位伪元素:

div[type="timeline"]>section:last-of-type::after {
  display: none;
}

或者使用:not()选择器section直接过滤掉最后一个:

div[type="timeline"]>section:not(:last-of-type)::after {
  ...
}