css - CSSセレクタ:非要素兄弟ノードを選択する方法は?

Question

ここの仕様によると: http://www.w3.org/TR/CSS21/selector.html#adjacent-selectors

隣接する兄弟セレクターの構文は、E1 + E2 です。ここで、E2 はセレクターのサブジェクトです。E1 と E2 がドキュメント ツリーで同じ親を共有し、E1 が E2 の直前にある場合、セレクターは一致し、非要素ノード(テキスト ノードやコメントなど) は無視されます。

では、要素のない兄弟ノードを選択するにはどうすればよいでしょうか。例: 次の html で、「非要素テキスト」テキストを選択するにはどうすればよいでしょうか?

<div><label>Some text here</label> Non-element text</div>

Answer 1

できません。CSS セレクターは、要素ノードのみを選択できます。これが、隣接兄弟コンビネータが説明どおりに機能する理由です。

スタイルを適用する必要がある場合は、それらを に適用し、divでオーバーライドしてみてくださいlabel。もちろん、これは適用しているスタイルによって異なります。一部のスタイルは元に戻すことができないか、継承の対象となるためです。

Answer 2

前述のように、CSS セレクターは要素ノードのみを選択できます。

問題を解決するには、テキスト ノードを要素でラップしてこの要素にスタイルを適用するか、コンテナ要素にスタイルを適用してラベル要素でオーバーライドします。