如何隱藏div html？

Question

<div class="navigation-menu w-32 d-flex flex-row">
   <div class="visible"><a href="#">Раздел1</a></div>
   <div class="visible"><a href="#">Раздел1</a></div>
   <div class="visible"><a href="#">Раздел1</a></div>
   <div class="visible"><a href="#">Раздел1</a></div>
   <div class="visible"><a href="#">Раздел1</a></div>
   <div id="more-hd more-vis"><i class="fas fa-chevron-circle-down"></i></div>  
 </div>

我試圖隱藏最后一個Div。我使用bootstrap。因此，在CSS #more-hd display:none d-none中也無濟於事，也#more-hd display:none ，與JS document.getElementById("more-hd").style.display = "none"也是如此。它始終可見。.我也首先嘗試了ul> li .. document.getElementById("more-hd").style.display = "none"反應

Answer 1

使用display: none !important; 在最后一個div ，向最后一個div添加一個類，並在該類中使用該CSS。 使用!important將覆蓋已應用於此div的css。 您也有多個id ，這是一個不好的做法，因此請在其中使用一個ID。

 .lastDiv{ display: none !important; } 

 <div class="navigation-menu w-32 d-flex flex-row"> <div class="visible"><a href="#">Раздел1</a></div> <div class="visible"><a href="#">Раздел1</a></div> <div class="visible"><a href="#">Раздел1</a></div> <div class="visible"><a href="#">Раздел1</a></div> <div class="visible"><a href="#">Раздел1</a></div> <div id="more-hd more-vis" class='lastDiv'>SomeContent<i class="fas fa-chevron-circle-down"></i></div> </div> 

如果要使用id ，請在此代碼中使用一個id值：

 #more-hd{ display: none !important; } 

 <div class="navigation-menu w-32 d-flex flex-row"> <div class="visible"><a href="#">Раздел1</a></div> <div class="visible"><a href="#">Раздел1</a></div> <div class="visible"><a href="#">Раздел1</a></div> <div class="visible"><a href="#">Раздел1</a></div> <div class="visible"><a href="#">Раздел1</a></div> <div id="more-hd" class='lastDiv'>SomeContent<i class="fas fa-chevron-circle-down"></i></div> </div> 

您還可以在css中選擇last-child選擇器，以確保class navigation-menu最后一個div的id或class是什么，它始終是隱藏的：

 .navigation-menu div:last-child{ display: none !important; } 

 <div class="navigation-menu w-32 d-flex flex-row"> <div class="visible"><a href="#">Раздел1</a></div> <div class="visible"><a href="#">Раздел1</a></div> <div class="visible"><a href="#">Раздел1</a></div> <div class="visible"><a href="#">Раздел1</a></div> <div class="visible"><a href="#">Раздел1</a></div> <div id="more-hd more-vis" class='lastDiv'>SomeContent<i class="fas fa-chevron-circle-down"></i></div> </div> 

Answer 2

您也可以使用:last-child

注意：ID始終是唯一的。 所以沒有兩個id的含義

 .navigation-menu div:last-child { display: none !important; } 

 <div class="navigation-menu w-32 d-flex flex-row"> <div class="visible"><a href="#">Раздел1</a></div> <div class="visible"><a href="#">Раздел1</a></div> <div class="visible"><a href="#">Раздел1</a></div> <div class="visible"><a href="#">Раздел1</a></div> <div class="visible"><a href="#">Раздел1</a></div> <div id="more-hd"><i class="fas fa-chevron-circle-down"></i>test</div> </div> 

Answer 3

id不能有空格。 如果要將CSS放在#more-hd ，應該是

id="more-hd"

不

id="more-hd more-vis"

如果需要多種方式來引用元素，請對其他類使用類。 它只能有一個ID。

Answer 4

 .navigation-menu .fa-chevron-circle-down{ display: none; } 

 <div class="navigation-menu w-32 d-flex flex-row"> <div class="visible"><a href="#">Раздел1</a></div> <div class="visible"><a href="#">Раздел1</a></div> <div class="visible"><a href="#">Раздел1</a></div> <div class="visible"><a href="#">Раздел1</a></div> <div class="visible"><a href="#">Раздел1</a></div> <div id="more-hd more-vis"><i class="fas fa-chevron-circle-down">Test for hide</i></div> </div> 

Answer 5

請應用此CSS。

.navigation-menu div:last-child {
    display: none;
}