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做到这一点.

有没有办法做到这一点？

---

编辑:

问题标题可能会产生误导.我不是要尝试选择框的样式,这已经非常普遍并且已经有很多答案了.我实际上是在尝试<P>根据选中的值设置元素的样式<select>.

我真正想做的是根据选定的数值显示多个表单域:

<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-1 div.stuff-2以及div.stuff-3当东西= 2的数.

像这样的小提琴

Answer 1

它被称为属性选择器

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

示例 http://jsfiddle.net/JchE5/