一花一世界 – CSS实例教程：树型列表的实现（下）

原文地址：Turning Lists into Trees

翻译整理：西米CC

显然，树型结构中最后一个节点需要我们单独设计。首先它的背景图片必须是独特的L型：

其次，竖线背景在最后一个节点处必须结束，我们可以通过设置其背景色为白色(仅针对本例),项目的背景图片覆盖在背景色之上，这样就替代了原来的竖线：

ul.tree li.last {
background: #fff url(lastnode.png) no-repeat;
}

但是浏览器并不知道哪个是尾节点，所以我们为每个尾节点添加一个last类进行声明：

• Animals
  • Birds
  • Mammals
    • Elephant
    • >Mouse
  • >Reptiles

  或者我们也可以通过一段JS来实现这个功能：

  >
  • Animals
    • Birds
    • Mammals
      • Elephant
      • Mouse

    不过JQuery的拥趸可能更乐意使用如下JS代码：

    事实上你也可以注意到，为每个尾节点添加last样式有一点违背保持HTML代码简洁性的初衷。如果你对此比较介意的话，我们也可以用last-child伪类来替代实现：

    ul.tree li:last-child {
background: #fff url(lastnode.png) no-repeat;
}

    不幸的是，伪类的定义还没有正式聚合到CSS2规范中，现在还有一些浏览器缺乏对它的支持性。