0

同じタイプの前の要素のクラスに基づいて要素を選択しようとしています。

たとえば、次のHTMLがある場合、3番目のスパン要素を選択します。

<div>
  <span class="red"></span>
  <span class="red"></span>
  <p>
    <span id="select me"></span>
  </p>
  <span id="don't select me"></span>
</div>

そのspan要素には、クラス「red」があるため、前のspan要素と同じプロパティを持たせたいと思います。

別の言い方をすれば、クラスが「赤」の要素と、クラスに関係なく同じタイプの次の要素を選択します。

これに頭を巻くのに苦労しています。次の要素だけでなく、同じタイプの次の兄弟を選択する方法は、何もないよりはましです。たとえば、span.red〜spanは、「クラスredの以前のspan兄弟を持つspan要素」を意味しない場合は問題ありません。

助けてくれてありがとう。

その他の例は次のとおりです。

<div>
  <span class="red"></span>
  <span id="select me"></span>
  <p>
    <span class="red"></span>
  </p>
  <span id="select me"></span>
</div>

上記の例では、最初のスパンに「赤」というクラスがあるため、2番目のスパン要素が選択されています。

3番目のスパンには「赤」というクラスがあるため、最後のスパン要素が選択されます。

<div>
  <span class="red"></span>
  <span class="red"></span>
  <p>
    <b></b>
  </p>
  <span id="select me"></span>
</div>

これの主な理由は、編集可能なdivに要素があることです。それらはcssカウンターで番号が付けられます。一部の要素は図のようにグループ化されている場合があります（2aと2b）。他の要素はグループ化されていないため、要素1、2a、2b、2c、3などになります。私が使用するクラス名は、それが「サブ」要素とサブカウンターをインクリメントしますが、メイン要素カウンターはインクリメントしません。一連のサブ要素の後に次の要素のクラスがない場合、それが最後のサブ要素であることがわかり、サブカウンターをリセットする必要があります。このように設定した理由は、要素内を移動して番号を自動的に更新できるようにするためです。また、クラス名を切り替えるだけで、サブ要素かどうかを簡単に変更できます。

4

3 に答える 3

1

これをテストするために別のケースが必要ですが、これはあなたの例ではうまくいくようです:

span.red ~* span {
    background: red;
}

jsFiddle の例

于 2013-02-09T21:59:08.297 に答える
0

セレクターで「同じタイプの兄弟」と言う方法はありません。ただし、選択したセレクターの後に兄弟セレクターを使用して、これらを組み合わせて、次のようなニーズを満たす単一のセレクターにすることができます。

span.red + span, div.red + div
{

}
于 2013-02-09T21:57:13.323 に答える
0

レベルでのみネストされている場合は、これを試すことができます:

.red + * > span {
  color: red;
}

これのユースケースは何ですか？同じようにスタイルを設定したいすべての要素に赤を追加してみませんか?

于 2013-02-09T22:08:54.800 に答える