0

我想让我的错误选择框的边框在 div.wwctrl 之外变成红色。问题是它没有使用高级 css 选择器改变它的颜色。我想使用 css 而不是 javascript 来实现这一点。这可能吗？谢谢你。

<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 ( #) 只允许在整个文档中的一个元素上使用，因此如果要将标识符应用于多个元素，则必须使用类 ( .)！

您只需在外面声明选择框的边框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 回答