当父元素设置为块时，如何将子元素显示属性设置为无

Question

我有一个Bootstrap Jumbotron包装了一个Bootstrap list.Jumbotrom默认设置为隐藏，每个list元素也设置为隐藏。

<div class="jumbotron" id="shoppingCart" style="display: none">
  <h1 class="display-4" >Checkout</h1>
  <p class="lead" id = "checkOutIntro">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
  <hr class="my-4">
  <p>Your shoppping cart :</p>

每个列表元素也被设置为隐藏.我们的想法是在需要的时候，通过一个JS函数让列表元素可见。

<!--Each item will be hidden until its populated by purchase.js-->
<li class="list-group-item d-flex justify-content-between align-items-center" style="display: none" id = "purchaseItem 2">
Dapibus ac facilisis in
<span class="badge badge-primary badge-pill">2</span>

该函数改变了列表元素的显示属性。

document.getElementById("purchaseItem " + purchase.paintingNumber).style.display = "block";

然而当我把父Jumbotrom div设置为可见时，整个列表也是可见的，不管列表元素在不在行。display:none 命令。

当父元素显示属性设置为相反的值时，是否可以将子元素显示属性设置为none block？

Answer 1

试着通过使用以下方法覆盖其他外部定义 重要 标签后的属性

document.getElementById("purchaseItem " + purchase.paintingNumber).style.display = "block !important";

阅读更多关于它 MDN网站文档