下一個元素的CSS選擇器？

好奇，如果我做錯過什麼，或者它真的是不可能的選擇下一個label以下HTML塊：下一個元素的CSS選擇器？

<div class="col-md-1"> 
    <input type="radio" name="name" value="alice" id="name-alice"> 
</div> 
<label for="name-alice">Alice</label> 
<div class="col-md-1"> 
    <input type="radio" name="name" value="bob" id="name-bob"> 
</div> 
<label for="name-bob">Bob</label>

我想選擇標籤檢查輸入，像

input:checked + label { 
    background-color: red; 
}

在這裏，+ CSS selector顯然不起作用。任何想法如何解決這個問題？

理由：一般可以認爲是「父母選擇的問題」，但輸入&標籤要素是特異性的，因爲與for和id屬性進行配對和目前還不清楚是否有在CSS一些對口。裏面的div

來源

2015-08-15 joanbm

可以將標記改變。使用當前的HTML，您不能根據「輸入」選擇「標籤」。 – Harry

也考慮使用jQuery，如果你對它很靈活。 –

@哈里爲什麼不呢？ 'for'屬性通過''id''將'label'分配給'input'＃ – joanbm

移動標籤：

<div class="col-md-1"> 
    <input type="radio" name="name" value="bob" id="name-bob"> 
    <label for="name-bob">Bob</label> 
</div>

來源

2015-08-15 08:19:47 deniskoronets

謝謝，但這不是正確的解決方案，因爲只有'輸入'需要由'col-md-1'類來格式化，而不是'label'。 – joanbm

@JoanBlackmoore這是唯一沒有訴諸JS的解決方案。簡而言之，CSS沒有父選擇器。如果標籤的格式如此重要，難道你不能僅僅給標籤指定一個類並且反對'.col-md-1'強加的樣式？ – zer00ne

答案upvoted。 – joanbm

下一個元素的CSS選擇器？

回答

相關問題