最近做项目，客户提出一个需求，让新闻列表的前三个条目加粗显示。由于新闻列表每天都有更新，所以就利用文档结构来给列表添加样式。
下面以一个简单列表为例，让前三列的前景色显示为红色。
首先是列表代码：
<!DOCTYPE html> <html> <head> <meta charset = 'utf-8'/> <title>ul</title> </head> <body> <ul> <li>aaaaaa</li> <li>bbbbbb</li> <li>cccccc</li> <li>dddddd</li> <li>eeeeee</li> <li>ffffff</li> <li>gggggg</li> <li>hhhhhh</li> </ul> </body> </html>
然后是两种备选方案：
- 利用伪类选择器first-child
<style type="text/css"> ul li:first-child{ color: red; } ul li:first-child+li{ color: red; } ul li:first-child+li+li{ color: red; } </style>
- 利用 相邻兄弟结合符“+”
<style type="text/css"> ul li{ color: red; } ul li + li + li + li{ color: black; } </style>
有一点需要注意的是这两种方式IE6都不支持（什么，还要兼容IE6）╮(╯▽╰)╭，想兼容IE6就写js吧。