Question

这是我用来设置菜单样式的CSS

.vd-menu-item { padding: 0; margin: 0; height: 100%; }
.vd-menu-item:before {content: " | ";}
.vd-menu-litem:first-child:before {content: " ";}

HTML

<div class="vd-menu vd-menu-horizontal">
    <ul>
        <li class="vd-menu-item"><a href="#" class="vd-menu-link">News</a></li>
        <li class="vd-menu-item"><a href="#" class="vd-menu-link">Sports</a></li>
        <li class="vd-menu-item"><a href="#" class="vd-menu-link">Finance</a></li>
    </ul>
</div>

我想将菜单列表与“|”分开在他们之间喜欢

News | Sports | Finance

所以想到使用：在李之前。它工作得很好但是第一个孩子，在这种情况下“新闻”有“|”在它之前。

| News | Sports | Finance

我尝试使用第一个孩子，但它没有按预期工作。所有分隔符“|”消失。

你能帮忙吗？

Answer 1

您可以使用：not Selector使其更容易。

.vd-menu-item { padding: 0; margin: 0; height: 100%; }
.vd-menu-item:not(:first-child):not(:last-child)::before {content: " | ";}

我希望我能帮助你：）

Answer 2

您的代码中似乎有拼写错误：org.json.JSONException: Value <br of type java.lang.String cannot be converted to JSONObject

如何使用CSS：first-child伪元素

2 个答案: