cssドキュメント構造を使用してリストにスタイルを追加
5289 ワード
最近プロジェクトをして、お客様はニュースリストの最初の3つの項目を太く表示するための需要を提出しました.ニュースリストは毎日更新されるので、ドキュメント構造を利用してリストにスタイルを追加します.
次に、簡単なリストを例に挙げて、前の3列の前景色を赤に表示します.
まず、リストコードです.
次の2つのバリエーションがあります.擬似クラスセレクタfirst-childを利用
隣接兄弟結合子"+"を利用
注意しなければならないのは、この2つの方法はIE 6がサポートされていないことです(何、またIE 6にも対応しています)∞(′▽`)∞、IE 6にも対応したいならjsを書きましょう.
次に、簡単なリストを例に挙げて、前の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>次の2つのバリエーションがあります.
<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つの方法はIE 6がサポートされていないことです(何、またIE 6にも対応しています)∞(′▽`)∞、IE 6にも対応したいならjsを書きましょう.