html - 如何使用:before for the third element?

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";
}

并为 4th、5th 覆盖 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 .