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

时间：2016-03-04 05:38:11

标签： html css

这是我的页面内容

<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的前两个div。 我该怎么办？

4 个答案:

答案 0 :(得分：2)

您可以使用 :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;
}

答案 1 :(得分：1)

Try using the nth-child selector：

＆＃13;
＆＃13; 
.entry-content div:nth-child(-n+2){
    display:none;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

<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。

答案 3 :(得分：0)

简单的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元素。

相关问题
最新问题