我有以下 CSS 和 HTML 代码:
<ul id="actions" class="frame frame-yellowglow">
</ul>
CSS
ul#actions {
clear: left;
width: calc(60% - 2px);
margin: 5px auto;
padding: 10px 0px;
text-align: center;
}
ul#actions:empty {
margin: 0;
padding: 0;
}
ul#actions li {
display: inline;
margin: 0px 3px;
}
.frame {
border-radius: 5px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
border: 1px #dddddd solid;
}
.frame:empty {
border: none;
box-shadow: none;
}
.frame-yellowglow {
border: 1px #D4B700 solid;
box-shadow: 0 0 4px #D4B700;
}
ul
填充了可以执行的某些操作的图标。但是,ul
不匹配 :empty 选择器为空时仍然呈现;边框、填充、阴影和所有。
[编辑:澄清一下,我在这里谈论的是尚未添加元素的时间。即使里面什么都没有,它仍然不匹配 :empty 选择器。 ]
为什么会这样?
最佳答案
根据 MDN
The :empty pseudo-class represents any element that has no children at all. Only element nodes and text (including whitespace) are considered.
您的“空”ul
可能包含一个空白文本节点。
关于html - CSS/HTML : ul:empty selector won't match an empty list,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17014078/