0

コーディングによって作成された4つのタブがあり、4番目のタブのスタイルを変えたいと思います。残念ながら、リスト要素に個別に割り当てられた特定のクラスまたはIDはなく、これを実現する簡単な方法はありません。

CSSのみを使用してリストオブジェクトの4番目のインスタンスのスタイルを設定することは可能ですか？

これは、スクリプトによって作成されるコーディングの例です。

<ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
   <li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active"><a href="#tabs-5310-0-0">Description</a></li>
   <li class="ui-state-default ui-corner-top"><a href="#tabs-5310-0-1">Features</a></li>
   <li class="ui-state-default ui-corner-top"><a href="#tabs-5310-0-2">Specification</a></li>
   <li class="ui-state-default ui-corner-top"><a href="#tabs-5310-0-3">360° Interactive Virtual View</a></li>
</ul>
4

4 に答える 4

4

:nth-childセレクターで疑似クラスを使用できます。

ul li:nth-child(4) { /* ... */ }

ブラウザのサポートは良好です。IE <9が唯一の（確かに重要ではない）問題です。

于 2012-05-24T10:03:57.657 に答える
2 
ul li:first-child + li + li + li

これはおそらく、この状況で得られる最高のブラウザー カバレッジを備えています。

于 2012-05-24T10:16:52.917 に答える
0

新しいブラウザでできること

ul li:nth-child(4);

古いブラウザ ( IE7/8) では、スタイルを設定できます

ul li + li + li + li { /* assign a style */ }

そして、次のリスト項目で元に戻します

ul li + li + li + li + li { /* revert the previous style */ }
于 2012-05-24T10:06:15.667 に答える
0

特に 4 番目のアイテムではなく、最後のアイテムを好む場合は、代わりにnth-last-childorを使用できlast-childます。

ul li:nth-last-child(1) { ... };

また

ul li:last-child { ... };
于 2012-05-24T10:06:59.080 に答える