1

これは簡単なことのはずですが、私が求めているものを見つけることができないようです。内部にサブ親と子を含む親 div があります。

<div class="parent">
  <div class="subparent1">
    <div class="foo">foo1 </div>
    <div class="bar">bar1 </div>
  </div>
  <div class="subparent2"> 
    <div class="foo">foo2 </div>
  </div>
  <div class="subparent3">
    <div class="bar">bar2 </div>
    <div class="foo">foo3 </div>
    <div class="bar">bar3 </div>
  </div>
</div>

最初のクラスを除いて、すべての「.foo」クラスを非表示にしたい。CSS3 を使用して '.foo' の最初の部分を除いて残りの部分をすべて選択するにはどうすればよいですか?

PS -- '.foo' の数は動的であり、変更されます。

4

1 に答える 1

3

このような状況は、HTML 構造に関する事前の知識に依存します。CSS には特定の種類の最初の孫を選択する機能がなく、最初の子のみを選択できるため、予測可能な HTML を使用せずに CSS だけを使用してそれを行う方法はありません。

たとえば、最初のサブペアレント.fooが常に最初のサブペアレントで発生することがわかっている場合は、ブロックとして表示するものを選択してから、一般的な兄弟コンビネータを使用して.foo後続のサブペアレントと をすべて選択し、それらを非表示にすることで問題を解決できる場合があります。.foo~

.parent > .subparent1 > .foo {
    display: block;
}

.parent > .subparent1 > .foo ~ .foo, /* .foo after the first in .subparent1 */
.parent > .subparent1 ~ div > .foo { /* .foo in subparents after .subparent1 */
    display: none;
}

.subparent1要素がまったく含まれていない可能性があり、そのサブペアレントに関係なく.foo最初の要素を選択したい場合、CSS セレクターだけでは不可能だと思います。.foo別の方法を見つける必要がある場合があります。たとえば、最初のクラスは.foo動的に生成されるため追加のクラスを割り当てるか、代わりに JavaScript を使用してスタイルを適用します。

于 2013-02-12T08:53:18.213 に答える