html - Pure CSS way to unhide a drop-down menu (or any HTML element) when a certain option in a preceding drop-down menu is selected

Question

这里是服务器端开发人员，涉足了一点 CSS。

我正在尝试使用下拉菜单中的 selected 选项来显示另一个下拉菜单。虽然针对此类问题有多种公开可用的 JS 解决方案，但这里的挑战是在没有任何 JS 帮助的情况下完全使用 CSS 来解决。

目前，我尝试编写 CSS，在使用 option 时将 display:block 添加到隐藏元素(select 元素) value="1" 在前面的 select 元素中被选中。

不用说它没有用。如果能就如何完成这类事情获得专家意见(通过一个说明性示例)，那就太好了。

另一方面，如果不可能的话，最好能得到一个说明性示例，说明该问题的替代纯 CSS 解决方案(如果存在)。

---

我在尝试什么:

body{
   background: #f0f3f4
}

.second{
   display:none
}
   
select#first option[value="1"]:selected ~ .second{
   display: block
}


   

<select id="first" style="width:95%;padding:6px 0;border:1px solid #3cb7dd;border-radius:5px;text-align:center;color:#1f8cad" class="cm mt sp mbl" name="turl">
    <option selected disabled hidden>Selector 1</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
</select>
    
<div class="second">
<select style="width:95%;padding:6px 0;border:1px solid #3cb7dd;border-radius:5px;text-align:center;color:#1f8cad" class="cm mt sp mbl" name="turl">
    <option selected disabled hidden>Selector 2</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
</select>
</div>

附注浏览器兼容性是一个考虑因素，因此如果建议的解决方案遵循得到良好支持的 CSS/HTML，那就太好了。

Answer 1

用明显的方法总结这个问题:<option> 元素支持 :checked ，但是邻接选择器( a + b ， a ~ b )不支持匹配后续元素，除非它们在同一父元素中，因此不能使用。

但是，复选框和单选按钮可以位于与其标签不同的容器中，这可用于 CSS 中的大量“状态”情况 - 我们只需要将某种假的 <select> 拼接在一起里面有标签，把它们的 <input> 放在外面，然后我们就可以像往常一样通过 ~ 进行匹配了!

body {
  font: 15px sans-serif;
}

/* a slightly janky custom dropdown */
.select {
  margin: 0.5em 0;
  line-height: 30px;
  height: 25px;
  width: 200px;
  border: 1px solid #ddd;
  /* it's a flexbox purely so that we can use `order` on the active element to move it to the top of the list */
  display: flex;
  flex-direction: column;
}

/* restyle labels to look vaguely like options */
.select label {
  position: relative;
  display: block;
  line-height: 25px;
  height: 25px;
  padding: 0 0.5em;
  background: white;
}

/* hide labels in out-of-focus dropdowns [except the active one] */
.select:not(:focus) label {
  display: none;
  /* this is to prevent clicking the current item instead of activating the dropdown */
  pointer-events: none;
  /* this is to override background from the multi-rule below */
  background: white!important;
}

.select:focus label {
  z-index: 100;
  /* and then allow clicking them once it actually has focus */
  pointer-events: all;
}

.select:focus label:hover {
  background: #08f!important; /* ditto */
  color: white;
}

/*
here's the catch: you can't just display:none the radiobuttons,
as then your dropdown will not lose focus and thus will not
close upon changing the active item.
So we just move them somewhere far away
*/
input.option {
  position: absolute;
  left: -999999px;
}

/*
this allows the correct label to be shown inside
a dropdown when it is not open.
please don't write these by hand
*/
#s1_1:checked ~ .select label[for="s1_1"],
#s1_2:checked ~ .select label[for="s1_2"],
#s1_3:checked ~ .select label[for="s1_3"],
#s2_1:checked ~ .select label[for="s2_1"],
#s2_2:checked ~ .select label[for="s2_2"]{
  display: block;
  background: #f0f0f0;
  /*
  makes the selected element show up on the top of the options list, 
  otherwise it's a bit disorienting
  */
  order: -1;
}

/* and finally, the actual selector */
#s1_2:not(:checked) ~ #s2 { display: none };

<input class="option" type="radio" name="s1" id="s1_1" checked/>
<input class="option" type="radio" name="s1" id="s1_2"/>
<input class="option" type="radio" name="s1" id="s1_3"/>
<div class="select" tabindex="1">
  <label for="s1_1">Option 1</label>
  <label for="s1_2">Option 2 [!]</label>
  <label for="s1_3">Option 3</label>
</div>
Some text after
<input class="option" type="radio" name="s2" id="s2_1" checked/>
<input class="option" type="radio" name="s2" id="s2_2"/>
<div class="select" tabindex="2" id="s2">
  <label for="s2_1">Option 1</label>
  <label for="s2_2">Option 2</label>
</div>