如何在父元素设置为块时将子元素显示属性设置为none

Question

我有一个 Bootstrap 超大屏幕包装 Bootstrap 列表。 Jumbotrom 设置为默认隐藏：

<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/块？

Answer 1

尝试在属性

之后使用 !important 标签覆盖其他外部定义

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

在 MDN web docs

阅读更多相关信息

如何在父元素设置为块时将子元素显示属性设置为none

How to set a child element display property to none when the parent element is set to block

html

javascript

list

display

bootstrap-4