你的位置:首页 > 网页设计

[网页设计]css 利用文档结构给列表添加样式


最近做项目,客户提出一个需求,让新闻列表的前三个条目加粗显示。由于新闻列表每天都有更新,所以就利用文档结构来给列表添加样式。

下面以一个简单列表为例,让前三列的前景色显示为红色。

首先是列表代码:

<!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>

然后是两种备选方案:

  1. 利用伪类选择器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>

     

  2. 利用 相邻兄弟结合符“+”
    <style type="text/css">      ul li{       color: red;      }      ul li + li + li + li{      color: black;      } </style>

     

有一点需要注意的是这两种方式IE6都不支持(什么,还要兼容IE6)╮(╯▽╰)╭,想兼容IE6就写js吧。