CSS は複数の親にわたる n 番目の子要素をターゲットにできますか?

CSS で複数の親にまたがる n 番目の子をターゲットにする: 未解決の謎

CSS の領域で、特定の子要素を選択する機能親内での設定は、Web デザイナーにとって長い間定番となってきました。ただし、複数の親にまたがる n 番目の子要素をターゲットにすると、パスが複雑になります。

次のシナリオを考えてみましょう。複数の ul 要素を持つ div.foo コンテナがあり、それぞれに次のセットが含まれています。リアイテム。 div.foo 内のすべての uls の最初と 3 番目の li 要素に特にスタイルを適用したいとします。

一見すると、次の CSS は簡単な解決策のように見えるかもしれません:

.foo li:nth-child(1),
.foo li:nth-child(3)
{
    color:red;
}

ただし、CSS の :nth-child() セレクターに固有の制限があるため、このアプローチは不十分です。同じ直接の親内の子要素のみをターゲットにできます。したがって、上記の CSS は各 ul の最初の子のみをスタイル設定するため、次のような望ましくない結果が生じます: http://jsfiddle.net/hTfVu/

望ましい結果を達成するには、CSS セレクターだけでは十分ではありません。 jQuery などの JavaScript ライブラリは、便利なソリューションを提供します。

$('.foo li:eq(0), .foo li:eq(2)')

このコードは、div.foo に含まれる各 ul 内の最初と 3 番目の li 要素を選択します。

あるいは、明示的にマークすることもできます。最初と 3 番目の li 要素はクラスまたは ID を使用し、それに応じて CSS 経由でそれらをターゲットにします。ただし、このアプローチには HTML 構造の変更が必要であり、常に実現可能であるとは限りません。

結論として、複数の親にまたがる n 番目の子要素をターゲットにすることは、CSS のネイティブ機能内で未解決の謎のままです。しかし、JavaScript ライブラリを採用したり、明示的な HTML マークアップを採用したりすることで、これらの制限を克服でき、複雑なドキュメント構造全体にわたって正確かつ微妙なスタイルを適用できるようになります。

以上がCSS は複数の親にわたる n 番目の子要素をターゲットにできますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。