3

最初の兄弟のクラスに基づいて、2番目の兄弟の子要素のスタイルを定義しようとしています。

これが私が達成しようとしていることの例です

<div >
      <div class="one">
          <div class="find edit">
              Find me
          </div>
      </div>
      <div class="two">
          <div class="change">
              Change me
          </div>
      </div>
</div>

この例では、「edit」クラスが見つかった場合に「Changeme」を緑色にします。純粋にcssに基づいてこれを達成することは可能ですか？

感謝します。

ありがとう、メダ

4

3 に答える 3

2

私の知る限り、親セレクターにアクセスすることはできません（アクセスできればよかったのですが）。この構造を検討できれば、まったく問題ありません。

HTML

<div>
  <div class="one edit">
    <div class="find">
      Find me
    </div>
  </div>
  <div class="two">
    <div class="change">
      Change me
    </div>
  </div>
</div>

CSS

.one.edit + .two .change { color: green; }

そうでない場合は、少しのJavaScriptで簡単に目的を達成できます。

于 2013-02-15T01:54:44.483 に答える
1

アップデート：

今、私editは子供に必要なクラスに気づきました。それはいけません。

単にセレクターのようなものが必要parentであり、これはCSS 3には存在しませんが、CSS 4で提案されていますが、それはすぐには実現しません。

詳細はこちら：

「バーを含むfoo」のCSSセレクター？

。

オリジナル：

気になるブラウザによっては、これが機能する場合があります。

div.one + div.two > div.change {
    color: green;
}

参照：

http://www.w3.org/TR/CSS21/selector.html#adjacent-selectors

実例：

http://jsfiddle.net/Meligy/NVjq6/

于 2013-02-15T01:41:37.440 に答える
1

ここで答えを見つけることができます：

アクティブな子の親のための複雑なCSSセレクター

リンクからコピーされた短い答え：

セレクターは上昇できません

CSSには、特定の条件を満たす要素の親または祖先を選択する方法がありません。より高度なセレクタースキーム（XPathなど）により、より洗練されたスタイルシートが可能になります。ただし、CSSワーキンググループが親セレクターの提案を拒否する主な理由は、ブラウザーのパフォーマンスとインクリメンタルレンダリングの問題に関連しています。

于 2013-02-15T01:52:13.780 に答える