如何使用css隐藏前两个div？

这里是我的网页内容如何使用css隐藏前两个div？

<div class="entry-content"> 
<div class="gv-grid"> 
    <div class="gv-grid-col-1-1 gv-left"> 

     <form class="gv-widget-search gv-search-vertical" method="get" action="https://www.mypage.com/test/"> 


      <div class="gv-search-box"> 
       <div class="gv-search"> 
        <label for="gv_search_11">Tìm kiếm</label> 
        <p><input name="gv_search" id="gv_search_11" value="" type="text"></p> 
       </div> 
      </div>  <div class="gv-search-box gv-search-box-submit"> 
       <input name="mode" value="all" type="hidden"> 
       <input class="button gv-search-button" id="gv_search_button_11" value="Search" type="submit"> 
      </div> 
     </form> 
    </div> 
    <div class="gv-grid-col-1-2 gv-left"> 
    </div> 
    <div class="gv-grid-col-1-2 gv-right"> 
    </div> 
</div> 

<div class="gv-table-container gv-container"> 
    <table class="gv-table-view"> 
     <thead> 
      <tr> 
       <th id="gv-field-1-2" class="gv-field-1-2" style=""><span class="gv-field-label"><a href="/test/?sort=2&amp;dir=asc" class="gv-sort icon gv-icon-caret-up-down"></a>&nbsp;Cần mua hộ</span></th> 
       <th id="gv-field-1-6" class="gv-field-1-6" style=""><span class="gv-field-label"><a href="/test/?sort=6&amp;dir=asc" class="gv-sort icon gv-icon-caret-up-down"></a>&nbsp;Tiền công</span></th> 
       <th id="gv-field-1-15" class="gv-field-1-15" style=""><span class="gv-field-label"><a href="/test/?sort=15&amp;dir=asc" class="gv-sort icon gv-icon-caret-up-down"></a>&nbsp;Nơi mua</span></th> 
       <th id="gv-field-1-5" class="gv-field-1-5" style=""><span class="gv-field-label"><a href="/test/?sort=5&amp;dir=asc" class="gv-sort icon gv-icon-caret-up-down"></a>&nbsp;Nơi giao</span></th> 
       <th id="gv-field-1-4" class="gv-field-1-4" style=""><span class="gv-field-label"><a href="/test/?sort=4&amp;dir=desc" class="gv-sort icon gv-icon-sort-desc"></a>&nbsp;Giao đồ trước</span></th> 
       <th id="gv-field-1-entry_link" class="gv-field-1-entry_link" style=""><span class="gv-field-label">Link</span></th> 
      </tr> 
     </thead> 

     <tbody> 
      <tr class="alt"> 
       <td id="gv-field-1-2" class="gv-field-1-2">CEZANNE Lasting Lip Color N 402</td> 
       <td id="gv-field-1-6" class="gv-field-1-6">80 000</td> 
       <td id="gv-field-1-15" class="gv-field-1-15">Nhật Bản</td> 
       <td id="gv-field-1-5" class="gv-field-1-5">Hà Nội</td> 
       <td id="gv-field-1-4" class="gv-field-1-4">14/04/2016</td> 
       <td id="gv-field-1-entry_link" class="gv-field-1-entry_link"><a href="https://www.mypage.com/test/entry/21/?gvid=11">Chi tiết</a></td> 
      </tr> 
     </tbody> 
     <tfoot> 
      <tr> 
       <th id="gv-field-1-2" class="gv-field-1-2"><span class="gv-field-label"><a href="/test/?sort=2&amp;dir=asc" class="gv-sort icon gv-icon-caret-up-down"></a>&nbsp;Cần mua hộ</span></th> 
       <th id="gv-field-1-6" class="gv-field-1-6"><span class="gv-field-label"><a href="/test/?sort=6&amp;dir=asc" class="gv-sort icon gv-icon-caret-up-down"></a>&nbsp;Tiền công</span></th> 
       <th id="gv-field-1-15" class="gv-field-1-15"><span class="gv-field-label"><a href="/test/?sort=15&amp;dir=asc" class="gv-sort icon gv-icon-caret-up-down"></a>&nbsp;Nơi mua</span></th> 
       <th id="gv-field-1-5" class="gv-field-1-5"><span class="gv-field-label"><a href="/test/?sort=5&amp;dir=asc" class="gv-sort icon gv-icon-caret-up-down"></a>&nbsp;Nơi giao</span></th> 
       <th id="gv-field-1-4" class="gv-field-1-4"><span class="gv-field-label"><a href="/test/?sort=4&amp;dir=desc" class="gv-sort icon gv-icon-sort-desc"></a>&nbsp;Giao đồ trước</span></th> 
       <th id="gv-field-1-entry_link" class="gv-field-1-entry_link"><span class="gv-field-label">Link</span></th> 
      </tr> 
     </tfoot> 
    </table> 
</div><!-- end .gv-table-container --> 
<div class="gv-grid"> 
    <div class="gv-grid-col-1-1 gv-left"> 
    </div> 
    <div class="gv-grid-col-1-2 gv-left"> 
    </div> 
    <div class="gv-grid-col-1-2 gv-right"> 
    </div> 
</div> 

<input class="gravityview-view-id" value="11" type="hidden"> 

<div class="gv-grid"> 
    <div class="gv-grid-col-1-1 gv-left"> 

     <form class="gv-widget-search gv-search-vertical" method="get" action="https://www.mypage.com/test/"> 


      <div class="gv-search-box"> 
       <div class="gv-search"> 
        <label for="gv_search_7770">Tìm kiếm</label> 
        <p><input name="gv_search" id="gv_search_7770" value="" type="text"></p> 
       </div> 
      </div>  <div class="gv-search-box gv-search-box-submit"> 
       <input name="mode" value="all" type="hidden"> 
       <input class="button gv-search-button" id="gv_search_button_7770" value="Search" type="submit"> 
      </div> 
     </form> 
    </div> 
    <div class="gv-grid-col-1-2 gv-left"> 
    </div> 
    <div class="gv-grid-col-1-2 gv-right"> 
    </div> 
</div> 

<div class="gv-list-container gv-container"> 

    <div id="gv_list_30" class="gv-list-view"> 



     <div class="gv-list-view-title"> 

      <h3 id="gv-field-1-custom" class="gv-field-1-custom"><b>Ga Cong Nghiep</b> cần mua <b>Giày zara kid size 37</b> bán tại <b>Tây Ban Nha</b></h3> 
     </div> 



     <div class="gv-grid gv-list-view-content"> 

      <div class="gv-grid-col-1-3 gv-list-view-content-image"><div id="gv-field-1-14" class="gv-image gv-field-1-14"><a rel="gv-field-1-14-30" class="thickbox" target="_blank" href="https://www.mypage.com/wp-content/uploads/gravity_forms/1-f9c2348184f1140e486c01fab8f03460/2016/03/1050103050_2_3_1.jpg"><img scale="0" src="https://www.mypage.com/wp-content/uploads/gravity_forms/1-f9c2348184f1140e486c01fab8f03460/2016/03/1050103050_2_3_1.jpg" alt="Ảnh" class="gv-image gv-field-id-14" width="250"></a></div></div><div class="gv-grid-col-2-3 gv-list-view-content-description"> 
       <div id="gv-field-1-custom" class="gv-field-1-custom"> 
        <h4><span class="gv-field-label"></span></h4><p> 
         Nơi giao hàng: Lạng Sơn<br> 
         Tiền hàng: 25.95 EUR<br> 
         Tiền công : 150,000 VND<br> 
         (Có thể mặc cả tiền công) 
        </p> 
        <p> 
         <a href="https://www.mypage.com/test/entry/30/"><button>Chi tiết</button></a> 
        </p> 
       </div> 
      </div> 
     </div> 


    </div> 


    <div id="gv_list_23" class="gv-list-view"> 



     <div class="gv-list-view-title"> 

      <h3 id="gv-field-1-custom" class="gv-field-1-custom"><b>Nguyễn Yên</b> cần mua <b>3 hộp kem đánh răng</b> bán tại <b>Nhật Bản</b></h3> 
     </div> 



     <div class="gv-grid gv-list-view-content"> 

      <div class="gv-grid-col-1-3 gv-list-view-content-image"><div id="gv-field-1-14" class="gv-image gv-field-1-14"><a rel="gv-field-1-14-23" class="thickbox" target="_blank" href="https://www.mypage.com/wp-content/uploads/gravity_forms/1-f9c2348184f1140e486c01fab8f03460/2016/03/kem-danh-rang.jpg"><img scale="0" src="https://www.mypage.com/wp-content/uploads/gravity_forms/1-f9c2348184f1140e486c01fab8f03460/2016/03/kem-danh-rang.jpg" alt="Ảnh" class="gv-image gv-field-id-14" width="250"></a></div></div><div class="gv-grid-col-2-3 gv-list-view-content-description"> 
       <div id="gv-field-1-custom" class="gv-field-1-custom"> 
        <h4><span class="gv-field-label"></span></h4><p> 
         Nơi giao hàng: Hà Nội<br> 
         Tiền hàng: 513 JPY<br> 
         Tiền công : 85,000 VND<br> 
         (Có thể mặc cả tiền công) 
        </p> 
        <p> 
         <a href="https://www.mypage.com/test/entry/23/"><button>Chi tiết</button></a> 
        </p> 
       </div> 
      </div> 
     </div> 


    </div> 


    <div id="gv_list_25" class="gv-list-view"> 



     <div class="gv-list-view-title"> 

      <h3 id="gv-field-1-custom" class="gv-field-1-custom"><b>Trường Hải Minh</b> cần mua <b>Đồng hồ Casio WAVECEPTOR WVQ-M410DE-2A2JF</b> bán tại <b>Nhật Bản</b></h3> 
     </div> 



     <div class="gv-grid gv-list-view-content"> 

      <div class="gv-grid-col-1-3 gv-list-view-content-image"><div id="gv-field-1-14" class="gv-image gv-field-1-14"><ul class="gv-field-file-uploads gv-field-1-14"><li><a rel="gv-field-1-14-25" class="thickbox" target="_blank" href="https://www.mypage.com/wp-content/uploads/gravity_forms/1-f9c2348184f1140e486c01fab8f03460/2016/03/51Pj4cBrBpL.jpg"><img scale="0" src="https://www.mypage.com/wp-content/uploads/gravity_forms/1-f9c2348184f1140e486c01fab8f03460/2016/03/51Pj4cBrBpL.jpg" alt="Ảnh" class="gv-image gv-field-id-14" width="250"></a></li><li><a rel="gv-field-1-14-25" class="thickbox" target="_blank" href="https://www.mypage.com/wp-content/uploads/gravity_forms/1-f9c2348184f1140e486c01fab8f03460/2016/03/81xcVWtGDyL._UL1500.jpg"><img scale="0" src="https://www.mypage.com/wp-content/uploads/gravity_forms/1-f9c2348184f1140e486c01fab8f03460/2016/03/81xcVWtGDyL._UL1500.jpg" alt="Ảnh" class="gv-image gv-field-id-14" width="250"></a></li></ul></div></div><div class="gv-grid-col-2-3 gv-list-view-content-description"> 
       <div id="gv-field-1-custom" class="gv-field-1-custom"> 
        <h4><span class="gv-field-label"></span></h4><p> 
         Nơi giao hàng: Hà Nội<br> 
         Tiền hàng: 15,370 JPY<br> 
         Tiền công : 200,000 VND<br> 
         (Có thể mặc cả tiền công) 
        </p> 
        <p> 
         <a href="https://www.mypage.com/test/entry/25/"><button>Chi tiết</button></a> 
        </p> 
       </div> 
      </div> 
     </div> 


    </div> 


    <div id="gv_list_21" class="gv-list-view"> 



     <div class="gv-list-view-title"> 

      <h3 id="gv-field-1-custom" class="gv-field-1-custom"><b>Nguyễn Hương</b> cần mua <b>CEZANNE Lasting Lip Color N 402</b> bán tại <b>Nhật Bản</b></h3> 
     </div> 



     <div class="gv-grid gv-list-view-content"> 

      <div class="gv-grid-col-1-3 gv-list-view-content-image"><div id="gv-field-1-14" class="gv-image gv-field-1-14"><a rel="gv-field-1-14-21" class="thickbox" target="_blank" href="https://www.mypage.com/wp-content/uploads/gravity_forms/1-f9c2348184f1140e486c01fab8f03460/2016/03/N402.jpg"><img scale="0" src="https://www.mypage.com/wp-content/uploads/gravity_forms/1-f9c2348184f1140e486c01fab8f03460/2016/03/N402.jpg" alt="Ảnh" class="gv-image gv-field-id-14" width="250"></a></div></div><div class="gv-grid-col-2-3 gv-list-view-content-description"> 
       <div id="gv-field-1-custom" class="gv-field-1-custom"> 
        <h4><span class="gv-field-label"></span></h4><p> 
         Nơi giao hàng: Hà Nội<br> 
         Tiền hàng: 518 JPY<br> 
         Tiền công : 80,000 VND<br> 
         (Có thể mặc cả tiền công) 
        </p> 
        <p> 
         <a href="https://www.mypage.com/test/entry/21/"><button>Chi tiết</button></a> 
        </p> 
       </div> 
      </div> 
     </div> 


    </div> 

</div> 
<div class="gv-grid"> 
    <div class="gv-grid-col-1-1 gv-left"> 
    </div> 
    <div class="gv-grid-col-1-2 gv-left"> 
    </div> 
    <div class="gv-grid-col-1-2 gv-right"> 
    </div> 
</div> 

<input class="gravityview-view-id" value="7770" type="hidden">

我想用CSS来隐藏.entry-content前两个格。我该怎么办？

来源

2016-03-04 John

更多细节需要。如何隐藏？ –

说真的，4金徽章和46个人仍然问这样的问题.. ?? –

看看'：nth-child'或兄弟选择器。 – Harry

您可以按照使用:first-child CSS的方式做：

.entry-content div:first-child, .entry-content div:first-child + div { 
 
    display:none; 
 
}

<div class="entry-content"> 
 
    <div class="gv-grid">1</div> 
 
    <div class="gv-table-container gv-container">2</div> 
 
    <div class="gv-grid">3</div> 
 
    <div class="gv-table-container gv-container">4</div> 
 
</div>

编辑：

按照你的HTML结构使用CSS像下面：

.entry-content > div:first-child, .entry-content > div:first-child + div { 
    display:none; 
}

来源

2016-03-04 05:41:27 ketan

@John检查我的编辑。 – ketan

非常感谢你，它现在的作品！ – John

<div class="entry-content"> 
    <div class="gv-grid" style="display: none;">...</div> //HIDE THIS 
    <div class=gv-table-container gv-container" style="display: none;">...</div> //HIDE THIS 
    <div class="gv-grid">...</div> 
    <div class=gv-table-container gv-container">...</div> 
</div>

style标记嵌入CSS。

来源

2016-03-04 05:40:25

这个简单的CSS2.1版本使用兄弟选择器。

.gv-grid, .gv-table-container { 
    display: none; 
} 

.gv-grid ~ .gv-grid, .gv-table-container ~ .gv-table-container { 
    display: block; 
}

的兄弟选择的工作方式是，如果一个元素具有相匹配的较早兄弟会火。因此，第一条规则适用于共享父级内的所有.gv-grid和.gv-table-container元素;随后的规则将在以后的.gv-grid和.gv-table-container元素中覆盖它。

来源

2016-03-04 05:40:30 kibibu

Try using the nth-child selector：

.entry-content div:nth-child(-n+2){ 
 
    display:none; 
 
}

<div class="entry-content"> 
 
    <div class="gv-grid">1st</div> 
 
    <div class="gv-table-container gv-container">2nd</div> 
 
    <div class="gv-grid">3rd</div> 
 
    <div class="gv-table-container gv-container">4th</div> 
 
</div>

来源

2016-03-04 05:43:37

不错'-n + 2'，你能引用它吗？ – Afsar

@zan你是什么意思？ –

如何使用css隐藏前两个div？

回答

相关问题