在选择器外部应用CSS

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

.wwctrl{
位置：相对位置；
边框：1px纯蓝色；
}
挑选{
边框：1px纯红；
}
选择#错误+div{
位置：绝对位置；
z指数：-1；
顶部：0；左侧：0；
宽度：100%；高度：100%；
背景：黄色；
}
​

---

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

---

查看什么是高级CSS选择器？@Max这与问题有什么关系？我希望边框在div.wwctrl中，而不是在选择框中它本身并不重要，这是相同的过程。只需在我的选择器中添加一个额外的

+div

。确实是这样：还是我误解了你的问题？你到底想要什么？