8

マークアップをまったく制御できないプロジェクトがあります。「class1」のインスタンスの直後に続く「class2」のすべてのインスタンスを選択する方法を探しています。次の戦略は機能しますが、「class2」のインスタンスが 20 を超えて連続して発生する場合があり、コード内でそのような混乱を避けたいと考えています。

.class1 + .class2,
.class1 + .class2 + .class2,
.class1 + .class2 + .class2 + .class2,
.class1 + .class2 + .class2 + .class2 + .class2,
.class1 + .class2 + .class2 + .class2 + .class2 + .class2
// etc.
{
  // Applied Styles
}

...次のスタイルに

<div class="class1"></div>
<div class="class2">Style Me!</div>
<div class="class2">Style Me!</div>
<div class="class2">Style Me!</div>
<div class="class2">Style Me!</div>
<p>Blah blah blah</p>
<div class="class2">DO NOT STYLE ME</div>
<div class="class2">DO NOT STYLE ME EITHER</div>
4

4 に答える 4

4

:notこれは、 @spudley が提案した新しいセレクターを使用した闇の中での刺し傷です。大丈夫なサポートがあるようです: http://caniuse.com/#search=%3Anot。構文が正しいことを願っています。編集歓迎。

そして、これのほとんどは@mookamafoobのソリューションから取られました. @mookamafoob が:not時期尚早にセレクターを使用することを嫌がった場合に備えて、私は編集を送信しませんでした。

http://jsbin.com/umivas/6/edit

.class1 ~ .class2 + .class2 {
  color: red;
}

.class1 + .class2 {
  color: red;
}

.class1 ~ *:not(.class2) ~ .class2 {
  color: inherit;
}

編集：説明不足で申し訳ありません。最後の部分は、 の兄弟である要素を選択しようとし、.class1それ以降のすべての兄弟を元の状態に.class2リセットします。.class2適用するスタイルの数によっては、これは非常識かもしれません。

于 2013-01-18T21:38:17.893 に答える
3

私の提案は、単にスタイルを設定し.class1 ~ .class2、それをオーバーライドして以前のの値に戻すことですp ~ .class2。

そこにある2番目のセレクターは、それが何にオーバーライドされているのかを知ることができないため、これは完全な解決策ではありません。デフォルトが期待するものに設定する必要があります。しかし、それは実行可能でなければなりません。

私が持っていたもう1つのアイデアは、CSSnotセレクターを使用することでした。

~これにより、関連するすべての要素のグループを簡単に選択できるように切り替えることができますが、タグに続くclass2要素を使用notし~て除外することができます。<p>

例えば：

.class1 ~ :not(p) ~ .class2

残念ながら、このアイデアは示されているようには機能しないと思います。ここを使用すると、に~関係なく選択されたくない組み合わせがいくつか作成されますnot。動作するセレクターを思い付くことができるかもしれnotませんが、私は今試してみた時間の中でそれを考案することができませんでした。

于 2013-01-18T22:39:15.117 に答える
3

一般的な兄弟コンビネータは、必要なものを取得する場合があります。次のようになります。

.class1 ~ .class2 {
/* Styles */
}

詳細については、こちらを参照してください。

ここにも例がありますhttp://jsbin.com/arorij/1/edit

編集

これは、次のように2つのルールを一緒に使用して、あなたのケースでうまくいくかもしれません:

.class1 ~ .class2 + .class2 {
  color: red;
}

.class1 + .class2 {
  color: red;
}
于 2013-01-18T21:39:37.503 に答える
0

たぶん、ロジックを反転する必要がありますか？.class1 に続く .class2 または .class2 に続く .class2 のルールを作成できますか?

.class1 + .class2, .class2 + .class2 {
    ...
}

そのルールは、どちらにも従わないため、例の最後の div には適用されません。

于 2013-01-18T21:57:23.023 に答える