Home >Web Front-end >HTML Tutorial >css uses the document structure to add styles to the list_html/css_WEB-ITnose
css uses the document structure to add styles to the list_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:46:471042browse
During a recent project, the client made a request to make the first three items in the news list bold. Since the news list is updated every day, the document structure is used to add styles to the list.
The following is a simple list as an example, where the foreground color of the first three columns is displayed in red.
First the listing code:
<!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>
Then the two alternatives:
- Using the pseudo-class selector 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> - Use the adjacent sibling combination " "
<style type="text/css"> ul li{ color: red; } ul li + li + li + li{ color: black; } </style>
One thing to note is that IE6 does not support these two methods (what, it needs to be compatible with IE6)?(???)? If you want to be compatible with IE6, just write js.
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：CSS Notes<3>_html/css_WEB-ITnoseNext article：CSS Notes<3>_html/css_WEB-ITnose