Question

我想在div.wwctrl颜色为红色之外设置我的错误选择框的边框。问题是它没有使用advance 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（#）只允许在整个文档中的一个元素上使用，因此如果要将标识符应用于多个元素，则必须使用一个类（{{1 }}）！

您只需在.之外声明选择框的边框。

wwctrl

现在，您使用select.error{ border:1px solid red; }：

中的错误框的更具体的选择器覆盖此选择器

wwctrl

因为规则更具体，所以它会覆盖先前的规则。

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

<强> Your modified example

在选择器外部应用CSS

1 个答案: