使用CSS删除第二次出现的选择结果

Question

我使用的是一个HTML模板，在页脚有3块是div类:col-md-6 col-lg-4。使用CSS，我想删除从类过滤器中选择的第二个，因为模板插件不允许我添加JavaScript。请参阅下面的HTML。

<div class="row"> 
<div class="col-md-6 col-lg-4">
<div class="iq-fancy-box-04">
<div class="iq-icon">
<i aria-hidden="true" class="ion-ios-location-outline"></i>
</div>
<div class="fancy-content">
<h5>Address</h5>
<span>#################</span>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="iq-fancy-box-04">
<div class="iq-icon">
<i aria-hidden="true" class="ion-ios-telephone-outline"></i>
</div>
<div class="fancy-content">
<h5>Phone</h5>
<span class="lead"><a href="tel:"></a></span>
<p></p>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="iq-fancy-box-04">
<div class="iq-icon">
<i aria-hidden="true" class="ion-ios-email-outline"></i>
</div>
<div class="fancy-content">
<h5>Email</h5>
<span><a href="mailto:#########">########</a></span>
<p></p>
</div>
</div>
</div>
</div>

Answer 1

只需将.col-md-6.col-lg-4:nth-child(2) { display: none; }添加到您的CSS中，您就可以了:

.col-md-6.col-lg-4:nth-child(2) { 
display: none; 
}

<div class="row"> 
<div class="col-md-6 col-lg-4">
<div class="iq-fancy-box-04">
<div class="iq-icon">
<i aria-hidden="true" class="ion-ios-location-outline"></i>
</div>
<div class="fancy-content">
<h5>Address</h5>
<span>#################</span>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="iq-fancy-box-04">
<div class="iq-icon">
<i aria-hidden="true" class="ion-ios-telephone-outline"></i>
</div>
<div class="fancy-content">
<h5>Phone</h5>
<span class="lead"><a href="tel:"></a></span>
<p></p>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="iq-fancy-box-04">
<div class="iq-icon">
<i aria-hidden="true" class="ion-ios-email-outline"></i>
</div>
<div class="fancy-content">
<h5>Email</h5>
<span><a href="mailto:#########">########</a></span>
<p></p>
</div>
</div>
</div>
</div>

:nth-child(n)可用于选择特定类或标签的第n个元素。N声明元素的顺序。因此，.someClass:nth-child(5)意味着您对someClass类的第5个元素应用规则。

Answer 2

使用CSS:

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