设置display为none时如何移除元素边框？

嘿，我明白你遇到的困惑了——按道理display:none应该把元素彻底从文档流里移除，连带着它的边框也一起消失才对，但你的例子里最后一个元素的边框却还在。我来帮你捋捋可能的原因和解决办法：

最可能的原因：CSS选择器优先级不够 #

你给最后一个.control加了.d-none类，但如果你的.control类的样式（包括边框）相关的display属性定义在.d-none之后，或者.control的选择器权重更高，那display:none可能没真正生效，导致元素（和它的边框）还在渲染。

举个例子，如果你的CSS是这样的：

.d-none {
  display: none;
}
.control {
  border: 1px solid #000;
  display: block;
  /* 其他样式 */
}

相同权重的选择器，后面定义的样式会覆盖前面的——这里.control的display:block就会盖过.d-none的display:none，元素自然还是会显示，边框也跟着留下来了。

解决办法：提高.d-none的优先级 #

直接给.d-none加上父类选择器，让它的权重超过.control：

.control.d-none {
  display: none;
}

这样，当一个元素同时有.control和.d-none类时，这个更高权重的选择器会强制把元素设置为display:none，元素会彻底消失，边框自然也就看不到了。

另一种可能：你看到的边框不是隐藏元素的 #

有时候我们会搞错——可能你看到的边框其实是父元素（比如.inner）的边框，而不是那个被隐藏的.control的。比如如果.inner设置了border-bottom，即使最后一个子元素被隐藏，父元素的边框还是会显示，你可能误以为是隐藏元素的边框。

这种情况的话，你可以用CSS的:empty伪类来控制父元素的边框（注意:empty要求元素内没有任何内容，包括空格）：

.inner:empty {
  border: none;
}

如果你的.inner里有空格或者换行，:empty不生效的话，就需要用JavaScript来判断子元素的可见性，动态控制父元素的边框样式了。

验证方法 #

打开浏览器的开发者工具（按F12），找到那个被标记为.d-none的元素，查看它的Computed样式，看看display是不是none，同时看看边框样式是来自哪个选择器——这样就能精准定位问题啦。

内容的提问来源于stack exchange，提问作者Anthony Russo