星空网 > 软件开发 > 网页设计

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




原标题:css 利用文档结构给列表添加样式

关键词:CSS

CSS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

用一般税率还是用低税率申报?正确的VAT税率申报方法在这里:https://www.ikjzd.com/articles/59629
试问:一条差评竟达800元,亚马逊不刷单在中国真做不下去吗?:https://www.ikjzd.com/articles/59630
亚马逊卖家必读:Amazon CPC广告玩法解析:https://www.ikjzd.com/articles/59632
亚马逊日本站商机不容错过,日本站选品策略在此!:https://www.ikjzd.com/articles/59634
读懂facebook营销数据:玩转跨境who怕who:https://www.ikjzd.com/articles/59635
亚马逊卖家如何快速向亚马逊申请FBA索赔?:https://www.ikjzd.com/articles/59636
长治婚庆女司仪和主持人:https://www.vstour.cn/a/366176.html
北京丰台区水上乐园哪家好玩?:https://www.vstour.cn/a/366177.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流