css - 检查 li 是否有 ul

Question

我们有一个包含多个 UL 元素的子导航，其中包含 li 和 UL 元素。

考虑以下几点:

<ul>
    <li> <a href="#">link level 1</a>

        <ul>
            <li> <a href="#">link level 2</a>

            </li>
            <li> <a href="#">link level 2</a>

                <ul>
                    <li> <a href="#">link level 3</a>

                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

我们需要在所有 anchor 标记后面添加一个箭头，第 3 层除外。

我现在有以下 CSS，但这只显示 level 2 后面的箭头图标。

ul {
    padding:20px 0 0 0;
    ul {
        padding: 0;
        margin-left: 13px;
        & > li {
            list-style-type: none;
            & > a:not(:last-child):after {
                margin-top:3px;
                content:"\E259";
                font-family:'Glyphicons Halflings';
                text-align:right;
                font-size: 10px;
                float:right;
            }
        }
    }
}

这会在 a 不是最后一个元素的地方绘制图标。但是我们还需要在 level 1 后面有箭头，根据这个 CSS 这是最后一个元素，所以箭头图标没有被绘制。

我们如何解决这个问题？

Answer 1

您需要将 LESS 更新为(请注意我已经更新了字体和内容，因此我不必导入 glyphs 字体):

ul {
    padding:20px 0 0 0;
    & > li {
            list-style-type: none;
            & > a:not(:last-child):after {
                margin-top:3px;
                content:">";
                font-family:'arial';
                text-align:right;
                font-size: 10px;
                float:right;
            }
        }
    ul {
        padding: 0;
        margin-left: 13px;
    }
}

请注意，“>”位于输出窗口的最右侧。请参阅此处的工作示例: https://jsfiddle.net/6duxLkc4/