CSS 根据 HTML 选择选项值选择另一个元素

问题描述

是否有 CSS 选择器允许我根据 HTML 选择选项值选择元素?

Is there a CSS selector that allows me to select an element based on an HTML select option value?

<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.

I'm looking for an HTML/CSS only method to only display a selected number of form fields. I already know how to do it with Javascript.

有没有办法做到这一点?

Is there a way to do this?

问题标题可能具有误导性.我不是在尝试设置选择框的样式，这很常见，并且已经有很多关于 SO 的答案.我实际上是在尝试根据 <select> 中选择的值来设置 <P> 元素的样式.

The question title is perhaps misleading. I'm not trying to style the select box, that's pretty common and plenty of answers on SO already. I'm was actually trying to style the <P> element based on the value selected in the <select>.

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

How ever what I'm really trying to do is to display a number of form fields based on a selected numeric value:

<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>

我想在 number-of-stuffs=2 和 display div.stuff- 时显示 div.stuff-1 和 div.stuff-21 div.stuff-2 和 div.stuff-3 当素材数=2时.

I would like to display div.stuff-1 and div.stuff-2 when number-of-stuffs=2 and display div.stuff-1 div.stuff-2 and div.stuff-3 when number of stuffs=2.

像这样 fiddle

推荐答案

它被称为 属性选择器

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

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

这篇关于CSS 根据 HTML 选择选项值选择另一个元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持html5模板网！