当我尝试在CSS中键入一个时，我遇到了分隔符问题

Question

问候我的分隔符有问题：

#menu li:not(:first-child):before {
   content: " | ";
}

此代码有效，但第一项不像其他项目那样分开。这是我得到的结果：

test1 test2 | test3 | test4 

云有人告诉我如何解决这个问题？

Answer 1

css修正：

  

但是请注意没有区别所以 css 必须工作

＆＃13;

＆＃13;

#menu li:after {
content: " | "; }

#menu li:last-child:after {
content: ""; }

#menu li {display: inline-block;}

＆＃13;

<ul id="menu">
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
</ul>

＆＃13;

＆＃13;

＆＃13;

但是就像stackoverflow社区提到的那样：

这应该有效：

＆＃13;

＆＃13;

  #menu li:not(:first-child):before {
       content: " | "; 
       }
       
 #menu li {display: inline-block;}

＆＃13;

<ul id="menu">
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
</ul>

＆＃13;

＆＃13;

＆＃13;

Answer 2

第一个li没有分隔符，因为你的选择器指定样式不应用于第一个<li>。如果您希望所有<li>都有分隔符，则应将此声明添加到您的css中：

#menu li:first-child:after {
    content: " | ";
}

Answer 3

我认为这就是你想要的，它适用于：

（如果它不起作用，请检查您的页面以查找某些css规则是否不会隐藏第二个li之前）

＆＃13;

＆＃13;

#menu {
  list-style: none;
}

#menu li {
  display: inline-block;
}

#menu li:not(:first-child):before {
  content: " | "; 
}

＆＃13;

<ul id="menu">
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
</ul>

＆＃13;

＆＃13;

＆＃13;