码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2015-04-07 15:09:17      阅读:148      评论:0      收藏:0      [点我收藏+]

标签:

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

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

首先是列表代码:

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

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

标签:

原文地址:http://www.cnblogs.com/liubingblog/p/4398315.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!