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

浏览数：24 / 时间：2015年06月09日

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

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

首先是列表代码：

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

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

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