添加样式如果元素具有特定的兄弟

Question

我有以下html结构：

<div class="unit">
   <span class="error"></span>
   <input type="text" class="textInput"/>
</div>

只有在验证限制被破坏时才添加span。

因此，如果验证通过我在html后面渲染：

<div class="unit">       
   <input type="text" class="textInput"/>
</div>

如果css具有类error的兄弟跨度，那么在css中是否可以为输入绘制红色边框。

Answer 1

您可以尝试adjacent sibling选择器

.error + input.textInput 
{
   border:1px solid red;
}

Answer 2

请考虑以下代码：

.error + input.textInput {
    border: 1px solid red;
}

这将选择紧跟在.error节点之后的所有.textInput节点。

Answer 3

试试这个：

.unit span.error + input.textInput{border:1px solid red;}

或

.unit span.error + input.textInput{outline:1px solid red;}