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

Question

问题+概述

下面是两个包含div的代码段，它们最初被隐藏，然后单击button和jQuery的.show()来显示。两个div都具有外部样式表所应用的样式display: grid;。区别如下：

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

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

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

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

如果可能的话，我希望提供一种技术性的，低级的解释。

我把jQuery标签包括在了jQuery做一些我不知道的魔术的偶然机会中。

示例1：内联+外部样式

在以下代码段中，我将div的显示设置为外部样式表中的display: grid;。

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

然后我使用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：仅外部样式

在此代码段中-在所有其他条件相同的情况下-我已在外部样式表中将上述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" )大致相同，除了将display属性恢复到最初的状态。如果某个元素的显示值为inline，则该元素将被隐藏并显示，它将再次显示为inline。

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

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

Reference

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