Question

试图在SASS中实现以下目标，但在选择器之前$：not（：first-child）：却不成功

链接|友情链接链接

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。

Answer 1

我想这就是你想要的：

.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上的原因。

P.S .：在SCSS中：

.tab {
  &:not(:first-child) {
    .tab-link {
      &::before {
       content: "| ";
      }
    }
  }
}

SASS选择所有元素期望第一个孩子

1 个答案: