2

私は項目のリストを持っており、それぞれにクラスがあり、クラスは全体で繰り返されています。各クラスの最初のインスタンスのみを表示したい。CSSだけでそれは可能ですか？

<ul>
   <li class="red">red</li>
   <li class="red">red</li>
   <li class="blue">blue</li>
   <li class="blue">blue</li>
   <li class="yellow">yellow</li>
   <li class="red">red</li>
   <li class="yellow">yellow</li>
</ul>

ul li {display:none}
ul li .red:first-child, ul li .blue:first-child, ul li .yellow:first-child { display:block}

したがって、上記のコードでは、1 番目、3 番目、および 5 番目のリスト項目のみが表示されます。

4

3 に答える 3

5

このコードを使用して、必要な数のクラスを追加します。

.red,
.blue,
.yellow
{
    display: list-item;
}

.red ~ .red,
.blue ~ .blue,
.yellow ~ .yellow
{
    display: none;
}

HTML を使用し、各クラスの最初の要素のみを表示するこの JSFiddleを確認してください。

もちろん、定義済みのクラス名のセットがある場合、これは簡単です。あなたのクラス名が不明であるか、および/またはそれらの量が管理できない場合は、何らかのスクリプトを使用するのが最善です (jQuery を使用すると大いに役立ちます)。

于 2011-06-20T07:15:10.787 に答える
0

CSS2 では、以下を使用できます。

LI .red + .red { display: none; }
LI .blue + .blue { display: none; }
LI .yellow + .yellow { display: none; }

CSS2隣接セレクター+はどこですか

しかし、一度にすべての色に対して単一のルールを使用することは不可能だと思います.

于 2011-06-20T07:37:21.740 に答える
-3

非表示にするアイテムには、id を追加するだけです。

<li class="red">red</li>
<li class="red" id="hide">red</li>

CSS:

#hide { display:none; }
于 2011-06-20T08:27:03.720 に答える