Heim >Web-Frontend >HTML-Tutorial >css 利用文档结构给列表添加样式_html/css_WEB-ITnose
css 利用文档结构给列表添加样式_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:46:471042Durchsuche
最近做项目，客户提出一个需求，让新闻列表的前三个条目加粗显示。由于新闻列表每天都有更新，所以就利用文档结构来给列表添加样式。
下面以一个简单列表为例，让前三列的前景色显示为红色。
首先是列表代码：
<!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吧。
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：CSS笔记<三>_html/css_WEB-ITnoseNächster Artikel：CSS精心整理的面试题_html/css_WEB-ITnose