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:
<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>
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.
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
