先放效果:
我们经常会遇到这种情况,总是不知道怎么弄。
先来说说竖线:
其实竖线有很多种写法,你可以用li
标签的border-right
,可以把竖线也当做一个li
,还可以用li
的after伪元素
。
而如果想要第一个或最后一个li
没有竖线效果,之前经常用的就是给其他的li
单独设置class
规定样式,现在有一个更好的办法。
css中的:not()
选择器。
&:not(:last-child)::after {
content: "";
background-color: #cccccc;
height: 15px;
width: 1px;
position: absolute;
top: 8px;
right: 0px;
display: block;
}
上述代码的意思就是不包括最后一个子节点