14

私は次の（簡略化された）HTML構造を持っています

<td> 
    <DIV class="t-numerictextbox">
        <DIV class="t-formatted-value">$0.00</DIV>
        <INPUT id="MyObj_PropertyName class="t-input" name="MyObj.PropertyName">
    </DIV>
    <SPAN class="field-validation-error" data-valmsg-for="MyObj.PropertyName">blah blah</SPAN> 
</td>

私がやりたいのは、背景色を親 div.t-numerictextbox に設定して、スパン要素も存在する場合は赤にすることです。隣接する兄弟でこの条件付き選択を行うCSS構文は何ですか?

ところで、これは IE 8 で動作する必要があります。

背景、興味がある場合：

asp.net MVC アプリケーションがあり、Telerik MVC NumericTextBox コントロールを使用しています。ModelState 検証エラーが発生すると、MVC フレームワークは要素に class="input-validation-error" 属性を自動的に挿入し、スタイルシートはこのクラスを選択して要素を赤で強調表示します。ただし、Telerik MVC コントロールでは機能しません (Telerik の JavaScript がこれを上書きするためだと思います)。

ありがとう！

4

2 に答える 2

24

html の div の前にスパンを配置し、css で配置することができます。

次に、css 隣接兄弟セレクターを使用して、スパンに隣接する div を選択します。

最後にスパンに絶対位置を置き、それをtop:..pxdiv の下に取得するために a を与えます。

したがって、次のようになります。

span + div {
  background-color:red;
}
<td> 
  <span class="field-validation-error" data-valmsg for="MyObj.PropertyName">blah blah</span> 
  <div class="t-numerictextbox">
    <div class="t-formatted-value">$0.00</div>
    <input id="MyObj_PropertyName" class="t-input" name="MyObj.PropertyName">
  </div>        
</td>

于 2011-08-19T19:56:17.377 に答える
1

CSSはそれを行うことができません。div.t-numerictextbox が存在する場合、スパンのスタイルを設定できますが、その逆はできません。これは css の制限ですが、おそらく変更されることはありません。

于 2011-08-19T19:59:11.790 に答える