0

私は持っている:

<ul>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
</ul>

各liに異なる幅を追加したい。

私はインラインでそれをしたくありません。

CSS2 (CSS3 ではない) を使用して各 li をターゲットにするにはどうすればよいですか?

各liにクラス名を付ける方法はありますか?

ありがとう

4

5 に答える 5

1

nth-of-type を使用しない理由

ul li:nth-of-type(1){} /* First */
ul li:nth-of-type(2){} /* Seconds */

また、古いブラウザーが心配な場合は、CSS3 疑似クラスを追加する優れたライブラリーがあります。

CSS2 の唯一の方法は、各 LI にクラスを追加することです。

編集

実際には、LI ごとに異なるクラスだけが CSS2 の方法ではありません。元の質問に対する@Hashem Qolamiのコメントには、適切なCSS2ソリューションがありますが、彼が言うように、少しばかげています。

于 2013-07-18T15:45:12.993 に答える
0

CSS e:g-の各liにクラスを追加する必要があるため、comb cssを使用することもできます

li {}
li + li {}
li + li + li {}
li + li + li + li {}
li + li + li + li + li {}
于 2013-07-18T15:56:12.293 に答える
0

純粋な CSS2 を使用する場合は、それらにクラス名を付ける必要があります。:nth-of-type()これは疑似クラス セレクターで実現できますが、これは CSS3 の機能です。

これは、jQuery でも非常に簡単に実行できます (CSS3 への依存を避けたいが、マークアップにクラス名を追加したくない場合)。これには、(CSS クラスとしてプロパティ値をハードコーディングするのではなく) 必要に応じて幅を動的に変更できるという利点もあります。

于 2013-07-18T15:45:13.223 に答える
0

「各リー」とは、各リー要素を個別に意味しますか? もしそうなら、n 番目のセレクターがあなたの友達かもしれませんが、それは CSS3 です。

于 2013-07-18T15:45:40.333 に答える
0

float を使用して、すべての li にクラス名を付けて表示ブロックに設定できます。

サンプルフィドル

li{
    display:block;
    float:left;
    background:blue;
}
li.small{
        width:50%;
}
li.big{
   width:100%; 
}
于 2013-07-18T15:49:15.077 に答える