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

时间：2018-03-26 18:15:09

标签： html css css3 css-selectors

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

在这里，我粘贴了能够正常使用的代码我正在添加一个图像，告诉您出现了什么问题。

enter image description here

这是我的代码：

＆＃13;
＆＃13; 
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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

6 个答案:

答案 0 :(得分：6)

您可以使用: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 {
  ...
}

答案 1 :(得分：2)

您可以使用：last子选择器。 这将针对css中任何父级的最后一个子级。

答案 2 :(得分：2)

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

答案 3 :(得分：2)

此CSS规则将执行您想要的操作：

div[type="timeline"]>section:last-child::after  {
   height: 0;
}

它选择附加到最后:after元素的section伪元素，并将其高度设置为0，使其不可见。

除了将高度设置为0之外，您还可以使用其他属性/设置来使该元素不可见。

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:last-child::after  {
       height: 0;
    }
 
   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>

答案 4 :(得分：2)

只需将div[type="timeline"]>section::after{}更改为div[type="timeline"]>section:not(:last-child)::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:not(:last-child)::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>

答案 5 :(得分：1)

另一个干净的解决方案是将ID添加到每个部分，然后使用CSS :not选择器排除部分#four。

希望这有帮助！

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:not(#four):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 id="one">
    <header>Title One</header>
    <article>Content</article>
  </section>
  <section id="two">
    <header>Title Two</header>
    <article>Content</article>
  </section>
  <section id="three">
    <header>Title Three</header>
    <article>Content</article>
  </section>
  <section id="four">
    <header>Title Four</header>
    <article>Content</article>
  </section>
</div>

相关问题
最新问题