如何高亮动态生成的水平面包屑列表中的第2个列表项？

针对你用Knockout.js动态生成的横向面包屑，要高亮第二个列表项（比如示例里的“Blue Area”），这里有两种实用的实现方案，你可以根据需求选择：

方案一：纯CSS快速实现（推荐固定场景） #

如果你的需求只是固定高亮第二个列表项，不需要动态切换，直接用CSS的nth-child选择器就能搞定，完全不用修改JS代码：

先给面包屑的列表项定义高亮样式：

/* 针对第二个li元素设置背景色 */
.breadcrumb li:nth-child(2) {
  background-color: lightgray;
}

只要你的HTML结构是ol.breadcrumb > li的层级（也就是每个面包屑项直接是ol的子元素li），这个样式就能精准选中第二个项并高亮。

方案二：Knockout动态绑定（灵活场景） #

如果需要动态控制高亮状态（比如只有特定场景下才高亮），可以结合Knockout的$index内置变量和样式绑定来实现：

方式1：直接绑定style属性 #

在li标签里通过style绑定判断索引，注意Knockout的$index是从0开始计数的，所以第二个项的索引是1：

<ol class="breadcrumb" data-bind="foreach: breadcrumb">
  <!-- 当索引为1时设置背景色，否则为空 -->
  <li data-bind="text: $data, style: { backgroundColor: $index() === 1 ? 'lightgray' : '' }"></li>
</ol>

方式2：绑定CSS类（更易维护） #

推荐把样式定义成独立的CSS类，这样样式和结构分离，后期修改更方便：
先定义高亮类：

.breadcrumb-highlight {
  background-color: lightgray;
}

然后在HTML里用css绑定判断：

<ol class="breadcrumb" data-bind="foreach: breadcrumb">
  <li data-bind="text: $data, css: { 'breadcrumb-highlight': $index() === 1 }"></li>
</ol>

进阶：动态控制高亮开关 #

如果需要根据业务场景动态开启/关闭高亮，可以在ViewModel里加一个可观察变量来控制：

function ViewModel() {
  const self = this;
  // 面包屑数据
  self.breadcrumb = ko.observableArray(['Main Dashboard', 'Blue Area', 'Admin Settings', 'Set Color']);
  // 控制是否高亮第二个项的开关
  self.highlightSecondBreadcrumb = ko.observable(true);
}

ko.applyBindings(new ViewModel());

然后在HTML里结合这个变量判断：

<ol class="breadcrumb" data-bind="foreach: breadcrumb">
  <li data-bind="text: $data, css: { 'breadcrumb-highlight': $index() === 1 && highlightSecondBreadcrumb() }"></li>
</ol>

这样你只要在业务逻辑里修改highlightSecondBreadcrumb(true/false)，就能随时开启或关闭高亮效果。

内容的提问来源于stack exchange，提问作者nanonerd