此代码有什么问题?单击活动选项卡后,我无法执行。

.sample-4.sample li:nth-child(1) a.nav-link.active ~ li:last-child:after{transform:translateX(-290%)}
 .sample-4.sample li:nth-child(2) a.nav-link.active ~ li:last-child:after{transform:translateX(-104%)}
 .sample-4.sample li:nth-child(3) a.nav-link.active ~ li:last-child:after{transform:translateX(-90%)}
 .sample-4.sample li:nth-child(4) a.nav-link.active ~ li:last-child:after{transform:translateX(0%)}

.sample .nav.nav-tabs li:last-
 child:after {
   content:'';width:100%;height:3px;background-
   color:green;display:block;
   bottom:-4px;
   transform:translateX(0);
   transition:all .5s linear
 }


如果我像下面那样使用,代码工作正常。

 .sample-4.sample li:nth-child(1) ~ li:last-child:after{transform:translateX(-290%)}
 .sample-4.sample li:nth-child(2) ~ li:last-child:after{transform:translateX(-104%)}
 .sample-4.sample li:nth-child(3) ~ li:last-child:after{transform:translateX(-90%)}
 .sample-4.sample li:nth-child(4) ~ li:last-child:after{transform:translateX(0%)}

最佳答案

您正在尝试不使用pseudo-classafter content。您必须具有content才能将beforeafter呈现为DOM。
例:

li:last-child:after{
  content: "";
  width: 100px;
  height: 120px;
  display: block;
  transform:translateX(-290%);
}


另外,不要忘记将显示更改为blockinline-block。这样,您的尺寸(widthheightmarginpadding)将生效。

关于html - <a>的事件类无法在重复的<li>元素中获取,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/54459340/

10-12 13:06
查看更多