CSS選擇基於HTML的另一個元素選擇選項值

Question

是否有一個CSS選擇器，允許我根據HTML選擇選項值選擇元素？

<select> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
</select> 

<p>Display only if an option with value 1 is selected</p> 

我正在尋找HTML/CSS唯一的方法，只顯示選定數量的表單字段。我已經知道如何用Javascript做到這一點。

有沒有辦法做到這一點？

---

編輯：

問題標題也許是誤導性的。我沒有試圖對選擇框進行設計，這很常見，並且已經有很多答案。我實際上是試圖根據在<select>中選擇的值來設計<P>元素的樣式。

如何過我真正想要做的是顯示了一些基於選定的數值的表單字段：

<select name="number-of-stuffs"> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
</select> 
<div class="stuff-1"> 
    <input type="text" name="stuff-1-detail"> 
    <input type="text" name="stuff-1-detail2"> 
</div> 
<div class="stuff-2" style="display:none"> 
    <input type="text" name="stuff-2-detail"> 
    <input type="text" name="stuff-2-detail2"> 
</div> 
<div class="stuff-3" style="display:none"> 
    <input type="text" name="stuff-3-detail"> 
    <input type="text" name="stuff-4-detail2"> 
</div> 

我想顯示div.stuff-1和div.stuff-2時數的，東西當填充物的數量= 2時= display div.stuff-1div.stuff-2和div.stuff-3。

像這樣的事情fiddle

Answer 1

其稱爲attribute selector

option[value="1"] 
{ 
background-color:yellow; 
} 

例http://jsfiddle.net/JchE5/

Answer 2

您可以使用

select option[value="1"]

但瀏覽器支持不會太棒了。

Answer 3

我相信在「現場」或實時，只有JavaScript或jQuery纔有可能。使用display: none onLoad將div中的潛在隱藏字段包裝起來，並將JS或jQuery的狀態更改爲display: block或者您喜歡。

//Show Hide based on selection form Returns 
$(document).ready(function(){ 

//If Mobile is selected 
$("#type").change(function(){ 
    if($(this).val() == 'Movil'){ 
    $("#imeiHide").slideDown("fast"); // Slide down fast 
    } else{ 
    $("#imeiHide").slideUp("fast"); //Slide Up Fast 
    } 
}); 

//If repairing is selected 
$("#type").change(function(){ 
if($(this).val() == 'repairing'){ 


$("#problemHide").slideDown("fast"); // Slide down fast 
$("#imeiHide").slideDown("fast"); // Slide down fast 
}else{ 
$("#problemHide").slideUp("fast"); //Slide Up Fast 
} 
}); 
}); 
// type is id of <select> 
// Movil is option 1 
// Repairing is option 2 
//problemHide is div hiding field where we write problem 
//imeiHide is div hiding field where we write IMEI 

我用我的應用程序之一...

可能與PHP的過，但用PHP，你將不得不發送更改請求或者你可以寫在PHP代碼有一定的基於已經選擇的值將被裝載的類，例如

<select class="<?php if($valueOne == 'Something'){echo 'class1';}else{echo 'class2';}"> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
</select> 

Answer 4

這可能需要尚未用於CSS2或CSS3指定父選擇。

• CSS selector for "foo that contains bar"?
• Is there a CSS parent selector?

一個主題選擇一直defined in the CSS4 working draft爲2013年5月，但沒有瀏覽器廠商已經實現它。

所討論的方法是否有效（在理論上）使用主題選擇器仍有待觀察。

Answer 5

這種替代方法如何？

HTML：

<input name="number-of-stuffs" type="radio" value="1" /> 
<div> 
    <input type="text" name="stuff-1-detail" /> 
    <input type="text" name="stuff-1-detail2" /> 
</div> 
<input name="number-of-stuffs" type="radio" value="2" /> 
<div> 
    <input type="text" name="stuff-2-detail" /> 
    <input type="text" name="stuff-2-detail2" /> 
</div> 
<input name="number-of-stuffs" type="radio" value="3" /> 
<div> 
    <input type="text" name="stuff-3-detail" /> 
    <input type="text" name="stuff-4-detail2" /> 
</div> 

CSS：

div { 
    display: none; 
} 

input:checked + div { 
    display: block; 
} 

您還可以使用label和隱藏（多種方式）的input如果需要的話。我承認這需要一些修修補補顯示input和div分開，但我認爲這是值得的。