Question

我有一个水平列出多个项目的痕迹清单。在某些情况下，我想突出显示第二个列表项。列表项是动态生成的。有办法吗？

例如，如果输出看起来像这样，我想突出显示＆＃34;蓝色区域＆＃34;使用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()已编入索引。

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

Answer 2

＆＃13;

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: "/\00a0";
    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;
}

＆＃13;

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

＆＃13;

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

2 个答案: