首页 > 网站 > WEB开发 > 正文

css 利用文档结构给列表添加样式

2024-04-27 14:27:52
字体:
来源:转载
供稿:网友
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吧。


上一篇:IE6兼容透明背景图

下一篇:CSS实例练习

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表