根据所选选项，我想要显示几个块。
div {
display: none;
}
select[value="test1"] #targ1 {
display: block;
}
select[value="test2"] #targ2 {
display: block;
}
select[value="test3"] #targ3 {
display: block;
}Dropdown list:
<select name="Dropdown" id="select">
<option value="test1">Test a</option>
<option value="test2">Test b</option>
<option value="test3">Test c</option>
</select>
<div id="targ1">Test 1</div>
<div id="targ2">Test 2</div>
<div id="targ3">Test 3</div>
我还尝试了其他选择器，例如select[selected] ~ div或
option:focus #targ1。
我甚至尝试在::after元素上添加select伪元素，但是
div标记内的option被忽略或行为怪异。似乎select和option标签有自己的规则，我在w3schools上找不到。
如何仅使用HTML和CSS基于当前选定的div显示和隐藏option元素？
答案 0 :(得分：2)
为了检测当前使用CSS选择哪个选项，您需要将:checked伪类应用于option元素，而不是select元素。有关详细信息，请参阅问题“CSS :selected pseudo class similar to :checked, but for elements”。
option:checked {
font-weight: bold;
}<select>
<option>Choice 1</option>
<option>Choice 2</option>
</select>
将其与CSS组合器（the adjacent sibling selector +，the general sibling selector ~，the child selector >和the descendent selector）相结合，令人沮丧地无效。组合器可以组合以选择任何兄弟或后代，但永远不能选择父母或堂兄......并且因为the select element的HTML规范说其允许的内容是“零或更多option或者optgroup个元素“，你不能仅使用CSS的select元素的值来影响div。
以下示例监视select元素的更改。当发生更改时，它会抓取新选择的选项元素并从data attribute读取该选项的目标（这是一个很好的方便，因为它允许您在HTML中指定过滤器目标 - 从而保持模型和控制逻辑分离）。然后它遍历所有有效目标，并根据该目标是否在数据属性提供的列表中添加或删除.hidden类。
var filter = document.getElementById('filter');
filter.addEventListener('change', function() {
var option = this.options[this.selectedIndex];
var targets = option.dataset.targets.split(/(\s+)/);
for (var target of document.getElementsByClassName('target')) {
if (targets.indexOf(target.id) >= 0)
target.classList.remove('hidden');
else
target.classList.add('hidden');
}
});.target {
display: block;
}
.target.hidden {
display: none;
}<select id="filter">
<option data-targets="">Show no targets</option>
<option data-targets="t1">Show target 1</option>
<option data-targets="t2">Show target 2</option>
<option data-targets="t1 t2">Show targets 1 and 2</option>
</select>
<div class="target hidden" id="t1">Thsi is the first target.</div>
<div class="target hidden" id="t2">This is the second target.</div>
与下拉元素不同，单选按钮不需要嵌套在包装元素中。因此，您可以构建HTML，以便div元素是单选按钮的一般兄弟，并且您可以使用:checked类来影响其可见性。
.target {
display: none;
}
#f1:checked ~ #t1 {
display: block;
}
#f2:checked ~ #t2 {
display: block;
}
#f3:checked ~ #t1,
#f3:checked ~ #t2 {
display: block;
}<input type="radio" name="filter" id="f0" checked><label for="f0">Show no targets</label><br>
<input type="radio" name="filter" id="f1"><label for="f1">Show target 1</label><br>
<input type="radio" name="filter" id="f2"><label for="f2">Show target 2</label><br>
<input type="radio" name="filter" id="f3"><label for="f3">Show targets 1 and 2</label>
<div class="target" id="t1">This is the first target.</div>
<div class="target" id="t2">This is the second target.</div>
答案 1 :(得分：0)
经过一段时间的思考和皱眉......我得到了非常有趣的结果：
<!DOCTYPE html>
<html>
<style>
#marks {
width: 30px; height: 30px; margin: 0;
border: 1px solid gray;
cursor: pointer;
}
#marks_container {
width: 50px; height: 0px; z-index: 10; overflow: hidden;
background-color: lightgray;
position: relative; top: 40px; left: 5px;
}
#marks:focus > #marks_container, #marks_container:hover {
height: 100px;
}
#item1 {
background-color: red;
}
#item2 {
background-color: green;
}
#item3 {
background-color: blue;
}
.visible {
width: 150px; height: 150px;
position: absolute; left: 0px; top: 100px;
opacity: 0;
}
.visible:focus {
opacity: 1;
}
</style>
<body>
<div id="marks" tabindex="0">
<div id="marks_container">
<a href="#item1" class="b_lnk">item1</a>
<a href="#item2" class="b_lnk">item2</a>
<a href="#item3" class="b_lnk">item3</a>
</div>
</div>
<div tabindex="0" class="visible" id="item1"></div>
<div tabindex="0" class="visible" id="item2"></div>
<div tabindex="0" class="visible" id="item3"></div>
</body>
</html>
如你所见，我已经使用了项目的#id与焦点相同，我认为它也可以很好地修改flex属性和更改项目的顺序，我发现的主要问题是我无法单击页面上不是元素的任何其他位置后，保持元素处于焦点。因此，如果您有任何建议或改进，欢迎您。
从一个测试文件中删除了btw代码，其中有很多内容正在进行中，如果代码的一部分是补充的 - 只需忽略它们：）