是否可以針對一個div的兩個相鄰元素

我想知道是否可以使用中間元素來定位兩個相鄰元素？是否可以針對一個div的兩個相鄰元素

例如：

<div> 
    <span class="icon">icon</span> 
    <input id="input" class="input error" type="text" /> 
    <label for="input"></label> 
<div>

當輸入有誤類我要定位的標籤和跨度有紅色。

我設法使標籤紅下列要求：

input.error ~ label { 
    color: red; 
}

不過，我已經受夠了跨度沒有運氣。有人可以告訴我這是否可能？如果是這樣，請幫助。

來源

2017-03-17 Tikvout

不可能的，但如果要添加該類到輸入爲什麼不Ĵ是否將它添加到父div而不是？ – DaniP

不，您不能影響CSS中DOM的元素，只能下載 –

感謝您的快速響應。我仍然對JavaScript非常陌生。我正在使用jQuery驗證，它將類添加到我的輸入。我會檢查是否可以按照DaniP的建議將該類添加到標籤中。 – Tikvout

我用jquery .siblings()來定位跨度並向它添加一個類。

來源

2017-03-17 20:34:48 Tikvout

你的問題從來沒有用JavaScript標記，更不用說jQuery了。如果你正在尋找一個jQuery解決方案，你應該用它來標記你的問題。 – j08691

您可以使用flexbox和order屬性直觀地重新排序元素，同時將input作爲DOM中的第一個元素，因此您可以使用常規兄弟選擇器。

div { 
 
    display: flex; 
 
} 
 
.icon { 
 
    order: -1; 
 
} 
 
input.error ~ * { 
 
    color: red; 
 
}

<div> 
 
    <input id="input" class="input error" type="text"> 
 
    <span class="icon">icon</span> 
 
    <label for="input">label</label> 
 
<div>

來源

2017-03-17 20:41:20

我想找出是否有可能使用中間的一個目標兩個相鄰元素？

可以使用斧頭選擇%同時針對相鄰元素。

既然有.icon和label之間沒有共享類或元素類型，您需要聲明：

input.error % .icon, 
input.error % label { 
color: red; 
}

另外，（這種情況下），你可能會在CSS緊隨其後的兄弟選擇結合+和在斧頭最接近的前兄弟選擇?：

input.error ? .icon, 
input.error + label { 
color: red; 
}

來源

2017-03-19 10:40:19 Rounin

是否可以針對一個div的兩個相鄰元素

回答

相關問題