html - 仅使用 css 隐藏第二个下拉框 - 不起作用

Question

我想仅使用 css 隐藏以下代码中的第二个下拉框。

.dt select:nth-child(2) {
  display: none;
}

<span class="dt">
  <select>
    <option>1</option>
    <option>2</option>
    <option>3</option>
  </select> 
  <b>:</b>
  <select> <!--want to hide this select box-->
    <option>a</option>
    <option>b</option>
    <option>c</option>
  </select> 
  <b>:</b>
  <select>
    <option>x</option>
    <option>y</option>
    <option>z</option>
  </select> 
</span>

但这不起作用..我该怎么做？

FIDDLE

Answer 1

只需将 2 更改为 3 即可:

.dt select:nth-child(3) {
    display:none;
}

Apparently ，第一个元素不在索引 0，而是 1。