最近のプロジェクトで、クライアントからニュース リストの最初の 3 項目を太字にするというリクエストがありました。ニュース リストは毎日更新されるため、リストにスタイルを追加するためにドキュメント構造が使用されます。
以下は例としての単純なリストです。最初の 3 列の前景色が赤色で表示されます。
最初は列表代:
<!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>
その後は两种备选方案:
<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>
注意すべき点は、これら 2 つのメソッドは IE6 ではサポートされていないということです (何、IE6 と互換性が必要です)?(???)? IE6 と互換性を持たせたい場合は、js を記述するだけです。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
