問題描述

是否有 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模板網！