css - li要素をターゲットにしていますか？

Question

私は持っている：

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

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

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

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

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

ありがとう

score 1 · Accepted Answer

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ソリューションがありますが、彼が言うように、少しばかげています。

score 0 · Accepted Answer

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

li {}
li + li {}
li + li + li {}
li + li + li + li {}
li + li + li + li + li {}

score 0 · Accepted Answer

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

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

score 0 · Accepted Answer

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

score 0 · Accepted Answer

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

サンプルフィドル：

li{
    display:block;
    float:left;
    background:blue;
}
li.small{
        width:50%;
}
li.big{
   width:100%; 
}

5 に答える 5