html - 突出显示面包屑列表中的第二项

Question

我有一个面包屑列表，其中水平列出了多个元素。 在某些情况下，我想突出显示第二个列表项。列表项是动态生成的。有办法吗？

例如，如果输出看起来像这样，我想使用 background-color: lightgray 突出显示“蓝色区域”部分。

主仪表板 > 蓝色区域 > 管理设置 > 设置颜色

这是 HTML 代码片段:

    <ol class="breadcrumb" data-bind="foreach: breadcrumb" style="float:left;display:inline-block">
        <li><a data-bind="attr: {href: url}, text: text"></a></li>
    </ol>

Answer 1

如果您知道您将始终突出显示有序列表中的第 2 个列表项，那么您可以编写一个 css 规则来执行此操作:

.breadcrumb li:nth-child(2) {
    background-color: lightgray;
}

nth-child() 是 1 索引。

如果它并不总是有序列表中的第二个列表项，那么您可以在动态创建列表项时添加一个类。