ホームページ >ウェブフロントエンド >htmlチュートリアル >css はドキュメント構造を使用して list_html/css_WEB-ITnose にスタイルを追加します。
css はドキュメント構造を使用して list_html/css_WEB-ITnose にスタイルを追加します。
- WBOYオリジナル
- 2016-06-24 11:46:471042ブラウズ
最近のプロジェクトで、クライアントからニュース リストの最初の 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 を記述するだけです。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。