正确使用';隐藏的';html标记中的属性

正确使用';隐藏的';html标记中的属性,html,css,Html,Css,我遇到了一个问题,希望这里有人能启发我: <div class="myclass" hidden></> 在本地运行时,不显示此div。这是正确的,对吗?但是如果我将隐藏属性添加到class标记中,即: <div class="myclass hidden"></> 此时将显示div。这是应该发生的事情 但是,当我将“正确”的代码部署到我们的测试环境中时,div仍然显示,但是如果我将“hidden”属性添加到class标记中,它就不会显

我遇到了一个问题,希望这里有人能启发我:

<div class="myclass" hidden></>

在本地运行时,不显示此div。这是正确的,对吗?但是如果我将隐藏属性添加到class标记中,即:

<div class="myclass hidden"></>

此时将显示div。这是应该发生的事情

但是,当我将“正确”的代码部署到我们的测试环境中时,div仍然显示,但是如果我将“hidden”属性添加到class标记中,它就不会显示。我已经在Chrome中手动编辑了html,可以复制该行为。我不明白这是为什么。有人能帮我吗?
谢谢

隐藏不是类名,而是属性。除非在.css代码中有一个名为“hidden”的类,否则
将永远无法工作。把
hidden
想象成一个做某事的动作。另一个例子是
禁用
这是一个禁用元素的操作。隐藏隐藏一个元素。这就是为什么
有效的原因,也是使用
隐藏的正确方法。希望这是一个很好的解释。

在本例中,您使用的是全局HTML属性,这将使浏览器无法呈现元素

在另一种情况下,
您正在向元素添加一个名为
hidden
的类,该类可以与要添加到元素中的任何自定义样式相关联,也可以不与之关联,但不会生成任何“默认”样式。

该类与所有浏览器版本不兼容,如您所见:

要正确隐藏标记,请使用以下命令:

<div class="myclass hidden">...</div>

<style>
    .hidden { visibility:hidden; display:none; }
</style>
。。。
.hidden{可见性:隐藏;显示:无;}
display:none
完全隐藏标记(您仍然可以通过DOM与它交互)


使用
可见性:隐藏
标记不可见,但会占用页面上的空间。

该行为是意外的,因为每个结束标记都需要标记名,即
。第二个标记更为正确,因为
hidden
在HTML中不是一个已知的关键字,应改为用作类名,如第二个示例中所示。@symlink“
hidden
在HTML中不是一个已知的关键字,应改为用作类名” —  是一个全局HTML属性。从技术上讲,它不会向元素添加
display:none
。添加属性并检查样式;您将发现没有(额外)提到
display
CSS属性。它将元素从流中移除,就像
display:none
,但它是不同的。@Hereticsmonkey但是如果你检查Chrome开发工具,例如,你会发现
display:none
div[属性样式]
中。它不是直接添加到元素中,而是以某种方式添加到元素中。没有?但无论如何,我已经更新了我的答案,以避免任何误解。Chrome可以做到这一点,但是,例如,Edge没有,Firefox也没有。这不是标准的一部分,就这么说吧。谢谢你的更新。@HereticMonkey哦,好的!谢谢你的更正!每天你都会学到新东西。:)为什么两者都加上<代码>可见性:如果元素从流中移除,隐藏的
没有效果…因为浏览器兼容性和不同的行为我注意到在过去不同的浏览器处理这些标记的方式不同。我的意思是,它本身并没有伤害,只是它更改了两个属性而不是一个。。。同样,这个问题是关于
hidden
属性和将单词
hidden
放入class属性之间的区别,所以这个答案并不能完全回答这个问题。谢谢。这对我来说很有意义。顺便说一下,这些关闭标签应该是。我的打字错误。很高兴我能以一种有意义和合乎逻辑的方式提供帮助。
<div class="myclass hidden">...</div>

<style>
    .hidden { visibility:hidden; display:none; }
</style>