在CSS样式后使用::的WordPress菜单

Question

我想添加|管道到每个li标签的末尾，不包括第一个和最后一个。有没有更好的方法来做到这一点，想到可能使用:nth-child()选择器？

 .categoryMenu ul li::after {
         content: ' | ';
    }

.categoryMenu ul li:nth-child(1) {
     content: 'hello';
     background: red;
}

似乎内容css属性不仅适用于:nth-child() <{1}}

Answer 1

使用边框而不是管道怎么样？ 类似的东西：

.categoryMenu ul li {
    padding: 0 1em;
    border-left:1px solid #000;
}
.categoryMenu ul li:first-child {
    border-left:none;
}

Answer 2

这应该可以解决问题。

.categoryMenu ul li:after {
  content: ' | ';
}

.categoryMenu ul li:first-child:after, .categoryMenu ul li:last-child:after {
  content: '';
}

似乎对这些选择器的浏览器支持现在很好， api.github.com

Answer 3

您还可以使用first-child和last-child选择器，这些选择器在li中与ul完美匹配。

Here is a working example，其中第一个和最后一个元素的末尾没有管道。