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

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

例如，如果输出看起来像这样，我想使用背景色：浅灰色高亮显示蓝色区域

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

以下是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>

---

如果您知道您将始终高亮显示有序列表中的第二个列表项，那么您只需编写一个css规则即可：

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

第n个子项为1索引

---

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

如果您知道您将始终高亮显示有序列表中的第二个列表项，那么您只需编写一个css规则即可：

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

第n个子项为1索引

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

面包屑{ 填充：10px 16px； 列表样式：无； 背景色：eee； } 面包屑李{ 显示：内联； 字号：18px； } 面包屑李+李：之前{ 填充：8px； 颜色：黑色； 内容：/\00a0； 背景：eee； } /*通过改变颜色来突出单词*/ ul.breadcrumb li:nth-child2a{ 颜色：黄色； } /*通过改变背景颜色来突出显示单词*/ 面包屑李：第n-child2页{ 背景颜色：灰色； } 意大利 面包屑{ 填充：10px 16px； 列表样式：无； 背景色：eee； } 面包屑李{ 显示：内联； 字号：18px； } 面包屑李+李：之前{ 填充：8px； 颜色：黑色； 内容：/\00a0； 背景：eee； } /*通过改变颜色来突出单词*/ ul.breadcrumb li:nth-child2a{ 颜色：黄色； } /*通过改变背景颜色来突出显示单词*/ 面包屑李：第n-child2页{ 背景颜色：灰色； } 意大利

---

你试过什么来达到这个目的吗？提示：查看：nth child CSS选择器…作为替代，因为这是动态行为，如果有两个以上的子项，您将需要js。例如，如果子项数>=2{…}或者{…}，则。。。表示要用于确定类应用程序元素数、用户行为、页面行为、，etc@Callat-我不认为这需要JS。正如下面的答案所述，您可以使用.breadcrumbli:nth-child2将第二个列表项作为目标。如果您只想在有两个以上的项目时执行此操作，只需添加一个：not选择器：。面包屑li:nth-child2:not:last child-如果第二个项目不是最后一个项目，则仅针对第二个项目，这意味着将有两个以上的项目。@ChrisBoon OP说，在某些情况下，我想突出显示第二个列表项目。列表项是动态生成的。如果这些案例涉及的不仅仅是改变一种颜色怎么办？在这种情况下还有什么其他逻辑？这就是为什么我推荐JS，并将其作为一条评论，而不是给出一个完整的答案。@Callat。很公平——这个问题很模糊，不清楚“特定案例”是什么。例如，如果列表在“第X页”上，其主体上可能有一个类名，则可能是“如果列表在”第X页“。仔细看代码示例，它看起来像是在knockout.js中编写的，因此它可能是一个三元运算符，如果逻辑超出了“如果有两个或更多项”，则“style”或“css”绑定将是最合适的。如果没有更多关于需要什么的信息，那么建议js似乎有点过头了，但也许我们的评论会让原始海报澄清：你有没有尝试过实现这一点？提示：查看：nth child CSS选择器…作为替代，因为这是动态行为，如果有两个以上的子项，您将需要js。例如，如果子项数>=2{…}或者{…}，则。。。表示要用于确定类应用程序元素数、用户行为、页面行为、，etc@Callat-我不认为这需要JS。正如下面的答案所述，您可以使用.breadcrumbli:nth-child2将第二个列表项作为目标。如果您只想在有两个以上的项目时执行此操作，只需添加一个：not选择器：。面包屑li:nth-child2:not:last child-如果第二个项目不是最后一个项目，则仅针对第二个项目，这意味着将有两个以上的项目。@ChrisBoon OP说，在某些情况下，我想突出显示第二个列表项目。列表项是动态生成的。如果这些案例涉及的不仅仅是改变一种颜色怎么办？在这种情况下还有什么其他逻辑？这就是为什么我推荐JS，并将其作为一条评论，而不是给出一个完整的答案。@Callat。很公平——这个问题很模糊，不清楚“特定案例”是什么。它可能只是“如果列表 在“第X页”上，例如，正文上可能有一个类名。仔细看代码示例，它看起来像是在knockout.js中编写的，因此它可能是一个三元运算符，如果逻辑超出了“如果有两个或更多项”，则“style”或“css”绑定将是最合适的。在没有更多关于需要什么的信息的情况下，建议js似乎有些过分，但我们的评论可能会让原始海报澄清：