我想使用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>
但这不起作用。我怎么能这样做?
答案 0 :(得分:2)
答案 1 :(得分:1)
.dt select:nth-child(2)
元素恰好是select
中的第二个元素时,才会应用 .dt
。在这种情况下,b
是第二个元素。您需要使用的是nth-of-type
,它将获得select
中的第二个.dt
元素。
.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;
答案 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)
.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;