4

サーバーから取得したhtmlをdivに挿入するためにjqueryを使用しています。div の内容に基づいて、コンテナーのスタイルを調整したいと思います。簡単なhtmlテストを書きました。X の子がある場合にこのサイトを適用するように css に指示するにはどうすればよいですか? グーグルで調べた後、 :has と :contains を試しましたが、どちらも機能しませんでした。cssの方が理にかなっているので、スタイルをJSに保持したくありません。

デモ: http://jsfiddle.net/wd9fk/

html

<div id="a"><div id="b">B</div></div>
<div id="a"><div id="c">C</div></div>

CSS

#a { height: 400px; border: 1px solid red;  }
#b { height: 200px; }
#a :has #b { height: 300px; border: 1px solid blue; }
4

4 に答える 4

7

CSS で DOM をたどることはできません。JavaScript を使用する必要があります。

理由を説明する記事は次のとおりです。http://snook.ca/archives/html_and_css/css-parent-selectors

簡単に言えば、これは CSS がブラウザーによって読み取られる方法によるものであり、それを導入することで、パフォーマンス ヒットが 10 倍 (少なくとも!) 増加します。プロファイルに適合するかどうかを確認します。

それは素晴らしい考えですが、実行可能ではありません。

于 2013-01-08T13:31:04.173 に答える
4

CSS の親セレクターはまだありませんが、計画があり、議論されています。CSS セレクター レベル 4 では、サブジェクト セレクターが提案されており、この方法で要素を参照できます。

ol! > li:only-child

ol次に、「単一の要素を含むli要素」(この構文は提案です) と読み、親ol要素のスタイルを設定できます。

この提案が成功した場合、サブジェクト セレクターは CSS セレクターの次のバージョンで利用できるようになります。

今のところ、サブジェクト セレクターが標準になるまでは、Javascript を使用することをお勧めします。

于 2013-01-08T13:32:27.947 に答える
-1 
#a > #b { height: 300px; border: 1px solid blue; }

これがあなたが望んでいたものかどうかはわかりませんが、試してみてください。

よろしく。

于 2013-01-08T13:30:52.520 に答える