Question

好吧，我已经用html / css工作了将近十年，对于我的生活，我似乎无法弄清楚为什么这不会起作用。< / p>

最初，我无法在页面加载时获得两个单独的div以及display: none以及其他属性。经过故障排除后，我最终得出的结论是，引导程序文件中出现了问题，因此经过一个多小时的缩减后，我将其简化为以下内容以删除所有可能的错误来源：

<!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，并通过firefox打开它只看到：

我查看了＆＃39; Inspect element＆＃39;，果然，＃first有属性＆＃34; display：none＆＃34;但#second没有。

我接着用chrome和edge检查了这个并获得了相同的结果。

我发现使用

#first, #second {
    display: none;
}

按预期工作。但是，我仍然需要为#second添加其他属性，因此，我认为自己很聪明：

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

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

经过多次重复以获得任何不同的结果后，我最终尝试了一些绝对没有理由继续工作的东西，但在这一点上，我停止了关怀。

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

刷新页面，什么都没看到。检查检查元素，果然，一切都在那里，只需＆＃34;显示：无＆＃34;

经过近3个小时的故障排除后，我的问题是：

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

额外信息：

Windows 10 Home 64位

应用：
Visual Studio代码

Answer 1

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

删除它，或粘贴下面的CSS：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

我注意到在<style>中，在}的{{1}}关闭之后，Firefox样式编辑器中会显示奇怪的字符。我猜这困扰了浏览器根本不处理#first {。

虽然这些字符（在Firefox中显示为#second）不会显示在我的文本编辑器中，但很奇怪......

...用新版本的â€‹替换该行解决了问题。

Answer 3

去过那里！

我通过复制/粘贴到JSFiddle来尝试你的例子，事实上你在#first闭包括之后有无关的字符。

摆脱那个角色，你就完成了。检查文本编辑器可能是个好主意。我总是在编码时启用不可见的字符，以防止这些类型的问题。

实际发生的事情是浏览器CSS处理器在#first闭包括号之后死掉，之后没有处理任何内容。这就是为什么#second似乎不起作用。

https://jsfiddle.net/sbnyg2ev/

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

#second {
    display: none;
}

display：none;没有工作两次

3 个答案: