如何隐藏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.I使用bootstrap.So,d-none没有帮助,在css中#more-hd display:none也是如此,也是JS document.getElementById("more-hd").style.display = "none".它总是可见的..我也尝试过ul> li首先......没有任何反应

Answer 1

使用display: none !important;到最后div一个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>

你也有选择last-child在CSS选择器,以确保无论id或者class是最后的div内部类navigation-menu,它总是隐藏:

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