用於選擇相對於特定元素的元素的CSS選擇器

我想通過僅使用CSS來在輸入周圍繪製彩色邊框。我不確定它是否可以用純CSS完成，但也許有一個css3選擇器，我監督了？用於選擇相對於特定元素的元素的CSS選擇器

這裏有一個迷你小提琴：http://jsfiddle.net/tsolti/rquf4kxh/

<table> 
    <tr> 
    <td> 
     <input class="error" value="red border"/><br/> 
     <input id="1" value="green border"/> 
    </td> 
    <td> 
     <input id="2" value="blue border"/> 
    </td> 
    </tr> 
</table>` 

.error { 
    border: 1px solid red; 
}

我想＃1獲得綠色邊框和＃2有一個藍色邊框。有任何想法嗎？同樣：沒有JS允許:)

重要提示：只有當第一個輸入有class =錯誤時，它們纔會被着色。

來源

2014-09-11 Thomas Solti

你可以這樣做：

DEMO

CSS：

.error { 
    border: 1px solid red; 
} 

td input.error ~ input { 
    border:1px solid green; 
} 

td + td input { 
    border:1px solid pink; 
}

編輯的問題進行修改後，包括條件的顏色只應設置在.error班級設置：

在當前HTML結構中，您將無法僅使用CSS定位最後一個輸入，因爲它不是.error元素的兄弟或後代。

解決方法：

DEMO

改變HTML標記，使得兩個輸入是輸入.error的兄弟姐妹：

HTML：

<table> 
    <tr> 
     <td> 
      <input class="error" value="red border"/> 
      <input value="green border"/> 
      <input value="blue border"/> 
     </td> 
    </tr> 
</table>

所以，你可以用+兄弟選擇他們的目標：

CSS：

.error { 
    border: 1px solid red; 
    display:block; 
} 

input.error+input { 
    border:1px solid green; 
} 
input.error+input+input { 
    border:1px solid blue; 
}

來源

2014-09-11 12:27:30

是的，但你的第二個選擇器不依賴於錯誤類 – 2014-09-11 12:29:31

該死的..這就是我認爲......非常感謝您驗證它！ – 2014-09-11 12:32:43

@ThomasSolti編輯答案：在當前的html結構中，你將無法實現你的目標。 – 2014-09-11 12:32:50

你試圖做這樣的嗎？

input[value="red border"]{ 
    border: 1px solid red; 
} 
input[value="green border"]{ 
    border: 1px solid green; 
} 
input[value="blue border"]{ 
    border: 1px solid blue; 
}

來源

2014-09-11 12:30:24

對不起，我編輯了這個問題並補充道：「只有當第一個輸入有class =錯誤時，它們纔會被着色。」我的錯！抱歉 – 2014-09-11 12:31:49

用於選擇相對於特定元素的元素的CSS選擇器

回答

相關問題