试图在 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] 删除。
我来说两句