html - 如何删除 :last-child border in Responsive page

Question

我开发了一个网页，其中一个 div 内有 5 个子 div。为了分隔这些 div，我给了最后一个子边框

.col-lg-2:not(:last-child) {
    border-right: 1px solid #9a6eb7;
}

我想删除宽度为 768px 的边框，但我做不到。如果我使用

.col-sm-6:not(:last-child) {
border-right: 0px solid #9a6eb7;
}

然后它正在删除大宽度设备的边框。

.content
{
	clear:both;
	min-height:500px;	
}
.contentHeader
{
	font-size:40px;
	font-family:TROUPE-REGULAR;
	text-align:center;
	height:150px;
}

.content1
{
	float:left;
}
.content1 ,.content2 , .content3 , .content4 ,.content5
{
	height:313px;
}
h2 , p
{
text-align:center;
font-family:TROUPE-REGULAR;	
}

 .dog ,.cat,.bird
{
min-width:190px;
height:150px;
vertical-align:center;
}
.bunny , .hamster
{
	width: 180px;
    height: 106px;
	vertical-align:center;

}
.content .col-lg-2:not(:last-child) {
	border-right: 1px solid #9a6eb7;
}

<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 content">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12  contentHeader">
WHY CHOOSE PetsApp
</div> <!-- end of contentHeader-->
<div class="col-md-1 col-lg-1 Blank"> </div>
<div class="col-xs-12 col-sm-6 col-md-2 col-lg-2 content1">
<h2> Lost & Found </h2> </br>
<p> simplified and effective
plateform to search and 
reunitelost pets with their
family
</p>
<img src="images/bunny.png" class="img-responsive bunny" alt="Bunny Image"/>
</div> <!-- end of content1 -->

<div class="col-xs-12 col-sm-6 col-md-2 col-lg-2 content2">
<img src="images/dog.png" class="img-responsive dog" alt="Dog Image"/>
<h2> Play Date</h2> </br>
<p> Connet with similar 
pets in  and around your
area. so your buddy will
never be alone.
</p> 
</div> <!-- end of content2 -->
<div class="col-xs-12 col-sm-6 col-md-2 col-lg-2 content3">
<h2> Adoption</h2> </br>
<p> Add or browse through our
lists of pets for adoption as
so them are in
need of a home
</p>
<img src="images/cat.png" class="img-responsive cat" alt="Adoption"/>
</div> <!-- end of content3 -->
<div class="col-xs-12 col-sm-6 col-md-2 col-lg-2 content4">
<img src="images/hamster.png" class="img-responsive cat" alt="Pet Book"/>
<h2> PET BOOK</h2> </br>
<p> What's your pet upto today?
Let the world know
</p>
</div> <!-- end of content4 -->
<div class="col-xs-12 col-sm-6 col-md-2 col-lg-2 content5">
<h2> INFO/ ARTICLES</h2> </br>
<p> Get Interesting tips and news
stories on everything you need to know about
pet health,behaviour and nutrition.
</p>
<img src="images/bird.png" class="img-responsive bird" alt="Info & Articles"/> </br>
</div> <!-- end of content5 -->

</div> <!--end of content-->

Answer 1

如果您想为最大宽度为 768px 的屏幕设置特定样式，您可以使用:

@media only screen and (max-width : 768px) {
    .col-sm-6:not(:last-child) {
        border-right: 0px solid #9a6eb7;
    }
}

仅当您当前设备的最大宽度为 768px 时才会应用此设置(更大的屏幕将忽略此设置)。