0

エラー選択ボックスの境界線をdiv.wwctrlの外側の色を赤にしたい。問題は、アドバンスCSSセレクターを使用して色を変更しないことです。これを実装するには、javascriptではなくcssを使用したいと思います。これは可能ですか？ありがとうございました。

<div class="wwctrl">
    <select id="error" name="summaryData.type"></select>
</div>

.wwctrl {
    position: relative;
    border: 1px solid blue;
}

select {
    border: 1px solid pink;
}

select#error + div {
    position: absolute;
    z-index: -1;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: yellow;
}
​

サンプルコード-JFIDDLE

4

1 に答える 1

2

確かに、CSS でそれを行うことができます。

最も重要: ID ( #) はドキュメント全体の 1 つの要素でのみ使用できるため、複数の要素に識別子を適用する場合は、クラス ( .)を使用する必要があります。

選択ボックスの境界線を外側で宣言するだけですwwctrl。

select.error{
  border:1px solid red;
}

ここで、このセレクターを、内部のエラー ボックス用のより具体的なセレクターでオーバーライドしますwwctrl。

.wwctrl select.error{
   border-color:pink;
}

このルールはより具体的であるため、以前のルールよりも優先されます。

<div class="wwctrl">
  <!-- has a pink border -->
  <select class="error" disabled="disabled"><!--...options...--></select>
  <select><!--...options...--></select>
</div>
<!-- outside wwctrl - has a red border -->
<select class="error" disabled="disabled"><!--...options...--></select>

あなたの修正例

于 2012-07-24T07:36:01.980 に答える