css - 在选择器外应用 CSS

Question

我想将错误选择框的边框设置在 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;
}
​

SAMPE CODE - JFIDDLE

Answer 1

当然你可以用 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> 

Your modified example