如何使用：之前为第三个<li>元素？</li>

Question

如何在第三个>元素之前添加<li>而不添加新的任何类或ID？

这是JsFiddle。

HTML：

<ol class="breadcrumb-tasks">
  <li>Ethernet</li>
  <li>Compputer</li>
  <li>Design</li>
</ol>

CSS：

.breadcrumb-tasks{
  padding: 0;
  list-style: none;
}

.breadcrumb-tasks li {
  color: #999;
  display: inline-block;
}

.breadcrumb-tasks li + li:before {
  color: #ccc;
  content: "/\00a0";
}

Answer 1

对于不支持:nth-child()伪类的旧浏览器，您可以使用adjacent sibling selector，如下所示：

.breadcrumb-tasks li + li + li:before {
    content: ">\00a0";
}

并覆盖第4次，第5次的content，...列出项目：

.breadcrumb-tasks li + li:before,           /* selects 2nd+ list items  */
.breadcrumb-tasks li + li + li +li:before { /* selects 4th+ list items  */
  color: #ccc;
  content: "/\00a0";
}

<强> WORKING DEMO

但对于现代浏览器support CSS3 selector（包括IE9 +）：

.breadcrumb-tasks li:nth-child(3):before {
    content: ">\00a0";
}

<强> WORKING DEMO

Answer 2

这样，它总是最后一个（如果你有超过3个）。

ol li:last-child:before{
    content: ">";
}

JsFiddle

Answer 3

li:nth-child(3):before
{
    content: ">";
}

<强> FIDDLE

Answer 4

.breadcrumb-tasks li:last-child:before { content: "› "; }