處理輸入：焦點+ 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; 
}