Question

我使用了一个相当简洁的例子，用户根据单选按钮的输入隐藏了部分，如下所示：

CSS：

div[class^="section"] {     
    display: none;
}

input.choose-a:checked ~ div.section-a,
input.choose-b:checked ~ div.section-b,
input.choose-c:checked ~ div.section-c {
    display: block;
}

HTML：

<input type="radio" class="choose-a" name="sectionselect"/>
<input type="radio" class="choose-b" name="sectionselect"/>
<input type="radio" class="choose-c" name="sectionselect"/>
<div class="section-a">Section A content</div>
<div class="section-b">Section B content</div>
<div class="section-c">Section C content</div>

但是，我想根据下拉列表中当前选择的选项显示和隐藏部分。所以，当然，我试过了：

CSS：

div[class^="section"] {     
    display: none;
}

option.choose-a:checked ~ div.section-a,
option.choose-b:checked ~ div.section-b,
option.choose-c:checked ~ div.section-c {
    display: block;
}

HTML：

<select>
    <option class="choose-a">option A</option>
    <option class="choose-b">option B</option>
    <option class="choose-c">option C</option>
</select>
<div class="section-a">Section A content</div>
<div class="section-b">Section B content</div>
<div class="section-c">Section C content</div>

这似乎不起作用。然而this page似乎表明＆＃39;：已检查过＆＃39;确实在一个选项上起作用。还有另一种方法吗？

Answer 1

那是因为<div>不是<option>的兄弟，而是<select>。在CSS中，没有父选择器。所以我担心下拉不可能。

基于下拉选项显示和隐藏CSS部分

1 个答案: