处理输入：焦点+标签在css中

Question

如果我将焦点设置在一个元素上，我将使用css中的+来访问下一个标签（例如）。

input:focus + label {
     color:red;
}

但是如何获得一个或更多的元素（在我的例子中是.arrow）？

<div class="fade">
    <input type="text" required name="field1" placeholder="Field 1 Triggered on Focus/Blur" />
    <label>type text</label>
    <div class="arrow"></div>
</div>

我制作了一个jsfiddel here。 在第一个输入上，我有一个浮动到顶部的标签。 在第二个，我将角箭头（输入字段的右上角）更改为另一种颜色。 现在，我想将两者结合起来。

Answer 1

您需要与您的标记保持一致，但您可以使用另一个兄弟选择器：

input:focus + label {
     color:red;
}

input:focus + label + div.arrow {
     border-top-color: #333;
     border-right-color: #333;
}

Answer 2

你应该写下面的css。

input:focus + label, input:focus + label + div {
   color:red;
}