Question

我用Google搜索了一下，但也许有人可以向我解释为什么伪元素，即:before和:after，就是这样做的。

我有一个内容div，里面有一些元素 - 段落，锚点，图标等。让我们说在一个锚元素上我添加了一个:after伪元素，并用一个内容填充它显示图标

a:after{
    content:"\f001";
    font-family: "Awesome icon font";
    display: inline-block;
}

我可以通过点击按钮来切换该元素的可见性。

问题是当隐藏该元素时，DOM中不会显示伪元素。一旦我切换它的可见性（从display:none;到，假设display: inline-block;），将显示伪元素。

在一个更具体的例子中，我有一个导航菜单，如果我点击“汉堡包”菜单，可以隐藏或显示。一个导航项是购物车图标。我点击菜单图标切换滑动动画。所有文本菜单都会很好地向上滑动，但只有在动画完成后，商店图标才会“弹出”。看起来有点草率。

为什么会这样？为什么伪元素嵌套在其中的容器上的显示值控制伪元素的显示（即使它们本身的显示值与none不同）？它不仅会影响它们的显示值，当您检查DOM时，如果容器具有display: none;值，则不会出现任何伪元素。

编辑：

示例小提琴：http://jsfiddle.net/at4u56fy/

Answer 1

让我们看看文件说的是什么......

关于display: none;

此值导致元素不显示在formatting structure中   （即，在视觉媒体中，元素不生成框，也没有   对布局的影响）。后代元素不会生成任何框   要么;元素及其内容将从格式中删除   结构完全。通过设置，无法覆盖此行为   后代的“显示”属性。

请注意，'none'的显示不会创建一个隐形框;   它根本不会创造任何盒子。 CSS包括启用的机制   元素生成格式化结构中影响的框   格式化，但自己不可见。请参阅该部分   在visibility了解详情。

进一步向formatting structure说：

从带注释的文档树中，生成格式化结构。   通常，格式化结构非常类似于文档树，   但它也可能有很大不同，特别是当作者使用时   伪元素和生成的内容。一，格式化结构   根本不需要“树形” - 结构的本质   取决于实施。其次，格式化结构可以   包含比文档树更多或更少的信息。例如，   如果文档树中的元素的值为“none”   'display'属性，该元素将不会生成任何内容   格式化结构。另一方面，列表元素可以生成   格式化结构中的更多信息：列表元素   内容和列表样式信息（例如子弹图像）。

请注意，CSS用户代理在此期间不会更改文档树   这个阶段。特别是，由于样式表而生成的内容是   没有反馈给文档语言处理器（例如，用于重新分析）。

因此，如果元素设置为display: none;用户代理似乎忽略了CSS生成的内容。因此，您可能需要查看适用于您的visibility: hidden;。

伪元素可见性行为

1 个答案: