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

时间:2015-05-07 09:35:56

标签: html css

我想使用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

4 个答案:

答案 0 :(得分:2)

只需将2更改为3,就可以了:

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

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

答案 1 :(得分:1)

仅当.dt select:nth-child(2)元素恰好是select中的第二个元素时,才会应用

.dt。在这种情况下,b是第二个元素。您需要使用的是nth-of-type,它将获得select中的第二个.dt元素。

&#13;
&#13;
.dt select:nth-of-type(2) {
  display: none;
}
&#13;
<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>
&#13;
&#13;
&#13;

答案 2 :(得分:0)

请尝试以下操作: Demo

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item" data-color="red"></div>
<div class="item" data-color="green"></div>
<div class="item" data-color="yellow"></div>
<div class="item" data-color="blue"></div>

CSS:

p:nth-child(2) {
    display:none;
}
p {
    float:left;
}

答案 3 :(得分:0)

&#13;
&#13;
.dt select:nth-child(3) option {
    display:none;
}
&#13;
<span class="dt">
    <select>
        <option>1</option>
        <option>2</option>
        <option>3</option>
    </select> 
    <b>:</b>
     <select>
        <option>a</option>
        <option>b</option>
        <option>c</option>
    </select> 
     <b>:</b>
     <select>
        <option>x</option>
        <option>y</option>
        <option>z</option>
    </select> 
</span>
&#13;
&#13;
&#13;