display: none; 两次不起作用

Question

display: none; 两次不起作用

3

好的，我已经从事HTML/CSS工作将近十年了，但就是无法弄清为什么这个不起作用。

最初，我遇到了一些问题，即在页面加载时，我无法使两个独立的div具有display: none和其他属性。经过排查后，我得出结论是Bootstrap文件中存在问题，因此我花了一个多小时来简化它，以消除所有可能的错误源：

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>

#first {
    display: none;
}

#second {
    display: none;
}

</style>
</head>
<body>

   <div id="first" >abc</div>
   <div id="second">123</div>

</body>
</html>

我将这个文件保存为test.html，然后通过火狐浏览器打开，却看到了如下内容：

我用“检查元素”的方式进行了检查，果然，#first具有“display: none”属性，但#second没有。

随后我在Chrome和Edge中进行了检查，得到了相同的结果。

我发现可以使用

#first, #second {
    display: none;
}

程序按预期运作。然而，我仍需要向 #second 添加其他属性，因此认为自己很聪明：

#first, #second {
    display: none; <!--Awesome!-->
}

#second {
    height: 100px; <!--nope-->
    width: 100px; <!--nope-->
}

在努力尝试获得任何不同结果的重复之后，我尝试了一些绝对没有理由能够起作用的东西，但此时我已经不再在意。

我开始打开一个新文档，输入整个原始<style>...</style>（来自上面第一个代码块），从未保存的文档中复制它，并将其粘贴到有问题的文件中。

刷新页面，什么也没看到。检查“检查元素”，确实，所有内容都在那里，只是被隐藏了“display:none”。

所以，在近3小时的疑难解答后，我的问题是：

发生了什么？
为什么会这样？

额外信息：

Windows 10 Home 64-bit

应用程序：
Visual Studio Code

- R3D0

3

不是，而是/* Awesome! */。在样式中无法使用HTML注释。 - c-smile

另外，在＃first代码块后似乎有一个红点。尝试将其粘贴到jsfiddle中，您会看到。删除它可以使代码按预期工作。 - ishaan

@ishaan，干得好！我在OP的代码中也发现了同样的缺陷。去掉那个多余的符号后，代码就可以正常工作了。 - Nilesh Mahajan

c-smile，是啊...今天过得真长。我只是为了澄清才添加这些内容的，它们从来没有在我运行的代码中出现过。 @ishaan 谢谢你的发现，你有任何想法它是如何首次出现的吗？ - R3D0

@R3D0，我不知道那个是怎么来的。也许是你的编辑器添加了一些内容，或者你从某个包含特殊字符的网站复制了它...我不能确定。 - ishaan

3个回答

3

我注意到在您的<style>中，在#first {的结束}之后，在Firefox样式编辑器中显示了奇怪的字符。我猜测这让浏览器无法处理#second。奇怪的是，这些字符（在Firefox中显示为â€‹）在我的文本编辑器中也没有显示出来......然而，用新输入的一行替换含有}的那一行解决了问题。

- FriendFX

https://jsfiddle.net/horuskol/d198gqng/ < 我本来要发布答案的 - 你可以在 fiddle 的 CSS 编辑器窗口中看到奇怪的字符（这是从 OP 直接复制/粘贴的） - HorusKol

2

已经了解了！

我通过将示例复制/粘贴到JSFiddle中尝试了您的示例，实际上在#first闭合括号后面有多余的字符。

只需去掉该字符，问题就解决了。可能最好检查一下您的文本编辑器。编码时，我总是启用不可见字符以防止此类问题。

实际上发生的情况是，浏览器CSS处理器在#first闭合括号之后崩溃，并且之后的任何内容都不会被处理。这就是为什么#second似乎无法工作的原因。

https://jsfiddle.net/sbnyg2ev/

#first {
    display: none;
} <--- just delete that char, is not a space.

#second {
    display: none;
}

- afterxleep

有趣的是，在Visual Studio Code中，那个“不是空格”的字符甚至都没有显示出来。从none;的末尾删除到second之前的#，然后重新输入所有内容甚至都没有解决问题...也许是时候换编辑器了...再一次。 - R3D0

几年前。我会再试一次，看看情况如何。 - R3D0

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Ryan Little · Accepted Answer

你的CSS中有一个奇怪的字符，当将代码粘贴到jsfiddle时可以看到：

请删除该字符，或者粘贴以下CSS：

#first {
  display: none;
}
#second {
  display: none;
}

<div id="first">abc</div>
<div id="second">123</div>