此代码有什么问题?单击活动选项卡后,我无法执行。
.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-class
的after
content
。您必须具有content
才能将before
或after
呈现为DOM。
例:
li:last-child:after{
content: "";
width: 100px;
height: 120px;
display: block;
transform:translateX(-290%);
}
另外,不要忘记将显示更改为
block
或inline-block
。这样,您的尺寸(width
,height
,margin
和padding
)将生效。关于html - <a>的事件类无法在重复的<li>元素中获取,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/54459340/