問題描述

是否有 CSS 選擇器允許我根據(jù) HTML 選擇選項(xiàng)值選擇元素?

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>

我正在尋找一種僅顯示選定數(shù)量的表單字段的 HTML/CSS 方法.我已經(jīng)知道如何使用 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.

有沒有辦法做到這一點(diǎn)?

Is there a way to do this?

問題標(biāo)題可能具有誤導(dǎo)性.我不是在嘗試設(shè)置選擇框的樣式，這很常見，并且已經(jīng)有很多關(guān)于 SO 的答案.我實(shí)際上是在嘗試根據(jù) <select> 中選擇的值來設(shè)置 <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>.

我真正想做的是根據(jù)選定的數(shù)值顯示多個(gè)表單字段:

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- 時(shí)顯示 div.stuff-1 和 div.stuff-21 div.stuff-2 和 div.stuff-3 當(dāng)素材數(shù)=2時(shí).

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/

這篇關(guān)于CSS 根據(jù) HTML 選擇選項(xiàng)值選擇另一個(gè)元素的文章就介紹到這了，希望我們推薦的答案對(duì)大家有所幫助，也希望大家多多支持html5模板網(wǎng)！