外部 + 内联样式与仅外部样式

Question

问题+概述

下面是两个包含div 的sn-ps，最初隐藏，然后单击button 和jQuery 的.show() 显示。两个divs 都有样式display: grid; 被外部样式表应用。区别如下：

在示例 1 中，内联特异性优先于外部样式表。显示 div 时保留网格布局。

在示例 2 中，display: grid; 被级联覆盖。显示 div 时不保留网格布局。

在我看来，以下两个 sn-ps 应该具有相同的结果，因为两种 display: grid; 样式都被覆盖了 - 尽管似乎方式略有不同。

这里发生了什么导致第一个示例正常工作，而第二个示例破坏了网格布局？

如果可能的话，我更喜欢技术性的、低层次的解释。

我包含了 jQuery 标记，因为它是 jQuery 做一些我不知道的魔法。

示例 1：内联 + 外部样式

在下面的sn-p中，我在外部样式表中设置了一个div的显示为display: grid;。

我还将同一个div的显示设置为display: none; inline。

然后我使用 jQuery 的 .hide() 函数显示 div，并且 div 保留其网格布局。

$(document).ready(function() {
  $('#show-div').click(function() {
    $('#inline-style-div').show();
  });
});

#inline-style-div {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 50px 50px;
}

.grid-number {
  margin: 0;
  padding: 10px 25px 10px 25px;
  background-color: #333;
  color: white;
}

.grid-number:nth-child(even) {
  padding: 10px 25px 10px 25px;
  background-color: #ccc;
  color: #333;
}

#show-div {
  margin-top: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="inline-style-div" style="display: none;">
  <h5 class="grid-number">1</h5>
  <h5 class="grid-number">2</h5>
  <h5 class="grid-number">3</h5>
  <h5 class="grid-number">4</h5>
  <h5 class="grid-number">5</h5>
  <h5 class="grid-number">6</h5>
</div>

<button type="button" id="show-div">Show the div</button>

示例 2：仅外部样式

在这个 sn-p 中 - 在所有其他条件相同的情况下 - 我已在外部样式表中将上述 div 的显示顺序设置为 display: grid; 和 display: none;。

当我在这个例子中显示 div 时，div 不会保留它的网格布局。

$(document).ready(function() {
  $('#show-div').click(function() {
    $('#external-style-div').show();
  });
});

#external-style-div {
  display: grid;
  display: none;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 50px 50px;
}

.grid-number {
  margin: 0;
  padding: 10px 25px 10px 25px;
  background-color: #333;
  color: white;
}

.grid-number:nth-child(even) {
  padding: 10px 25px 10px 25px;
  background-color: #ccc;
  color: #333;
}

#show-div {
  margin-top: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="external-style-div">
  <h5 class="grid-number">1</h5>
  <h5 class="grid-number">2</h5>
  <h5 class="grid-number">3</h5>
  <h5 class="grid-number">4</h5>
  <h5 class="grid-number">5</h5>
  <h5 class="grid-number">6</h5>
</div>

<button type="button" id="show-div">Show the div</button>

Answer 1

使用 jQuery 的.show() 大致相当于调用.css( "display", "block" )，除了显示属性恢复到最初的样子。如果一个元素的显示值为inline，然后被隐藏并显示，它将再次显示inline。

在您的第一个示例中，jQuery 注意到内联显示值设置为 none，因此将其删除并让级联生效（感谢 @Alohci）。

在您的第二个示例中，jQuery 注意到初始显示值设置为 none（忽略它之前的第一个分配，因为它不知道这一点），因此假设您希望将其设置为 @987654329 @当你使用show()时。

Reference

进一步阅读：How does jquery's show/hide function work?（类似问题）