试图在 SASS 中实现以下目标,但我没有成功使用 $:not(:first-child):before 选择器
链接 | 链接 | 关联
HTML代码
<ul class="multistore"> <li class="tab"> <a class="tab-link">Link</a> </li> <li class="tab"> <a class="tab-link">Link</a> </li> <li class="tab"> <a class="tab-link">Link</a> </li> </ul>
SASS
.tab-link {
&:not(:first-child):before {
content: "|";
}
}
问题是我的结果是
| 链接 | 链接 | 关联
但我认为这可能是由于 li 中的 A 标签,每个 A 都是 li 的第一个孩子。
由于布局设计,PS 内容必须添加到 A 元素而不是 li。
我假设这就是你想要的:
.multistore { list-style-type: none; }
.multistore li { display: inline-block; }
.tab:not(:first-child) .tab-link::before {
content: "| ";
}
<ul class="multistore">
<li class="tab">
<a class="tab-link">Link</a>
</li>
<li class="tab">
<a class="tab-link">Link</a>
</li>
<li class="tab">
<a class="tab-link">Link</a>
</li>
</ul>
这有效,但有一个问题:|
成为可点击链接的一部分,对于用户来说,这部分属于哪个链接是不清楚的。这就是为什么我强烈建议将 放在|
上li
。
PS:在 SCSS 中:
.tab {
&:not(:first-child) {
.tab-link {
&::before {
content: "| ";
}
}
}
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句