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

Question

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

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

Main Dashboard > Blue Area > Admin Settings > Set Color

这是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

如果您知道您将始终在订购列表中突出显示第二个列表项目，那么您只需编写CSS规则即可：

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

nth-child()是1个索引。

如果并非总是在订购列表中的第二个列表项目，则在动态创建列表项目时可以添加类。

Answer 2

ul.breadcrumb {
    padding: 10px 16px;
    list-style: none;
    background-color: #eee;
}
ul.breadcrumb li {
    display: inline;
    font-size: 18px;
}
ul.breadcrumb li+li:before {
    padding: 8px;
    color: black;
    content: "/0a0";
    background: #eee;
}
/* To highlight word by chnaging color */
ul.breadcrumb li:nth-child(2) a {
color: yellow;
}
/* To highlight word by chnaging background color */
ul.breadcrumb li:nth-child(2) {
background-color: gray;
}

<ul class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">Pictures</a></li>
  <li><a href="#">Summer 15</a></li>
  <li>Italy</li>
</ul>