最近做项目，客户提出一个需求，让新闻列表的前三个条目加粗显示。由于新闻列表每天都有更新，所以就利用文档结构来给列表添加样式。
下面以一个简单列表为例，让前三列的前景色显示为红色。
首先是列表代码：
<!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吧。
时间： 2024-11-09 23:49:43