首頁 > web前端 > html教學 > css 利用文档结构给列表添加样式_html/css_WEB-ITnose

css 利用文档结构给列表添加样式_html/css_WEB-ITnose

WBOY
發布: 2016-06-24 11:46:47
原創
1045 人瀏覽過

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

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

首先是列表代码:

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

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板