html - 有没有一种方法可以仅使用 CSS 隐藏基于另一个 SELECT 的值的 SELECT？

Question

我有 2 个 SELECT 元素，但我只想在第一个元素具有特定值时显示第二个元素。

我知道如何用 javascript 做到这一点，但我希望我可以使用相邻的兄弟选择器来用纯 HTML/CSS 完成这个:

<style>
  select[name=select2] { display:none; }
  select[value=show] + select[name=select2] { display:auto; }
</style>

<select name="select1">
  <option value="show">Show Select 2</option>
  <option value="hide">Hide Select 2</option>
</select>
<select name="select2">
</select>

不幸的是，我无法让它工作。我想这是因为 value 不是 SELECT 的真实属性，但我不确定。知道这里发生了什么吗？

这里有一个 fiddle 可以用来测试: http://jsfiddle.net/rr24g/

Answer 1

不，完全不可能，因为css是“级联”的，你不能往上走

/* pseudo code - doesn't work, just demonstrating the problem */
select[name=select1] > option[value=show][selected] ::parent:: + select[name=select2]

你需要javascript!