13

我有以下 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 选择器不匹配。]

为什么会这样？

4

1 回答 1

20

根据MDN

:empty 伪类表示任何没有子元素的元素。仅考虑元素节点和文本（包括空格）。

您的“空”ul可能包含一个空白文本节点。

于 2013-06-09T20:58:45.340 回答