CSS/HTML：ul:empty 选择器不会匹配空列表答案

【问题标题】：CSS/HTML: ul:empty selector won't match an empty listCSS/HTML：ul:empty 选择器不会匹配空列表
【发布时间】：2017-03-02 07:58:53
【问题描述】：

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

为什么会这样？

【问题讨论】：

以什么方式填充？如果 DOM 对象有子对象，则它不会被视为空。这些元素是否由于标记或Javascript而存在是无关紧要的。
当您说“空”时，您的意思是它只是<ul></ul>？另外，您使用的是什么浏览器（可能不支持:empty）？
@lonesomeday 在页面生成时通过 PHP 进行，并且可以通过 javascript 进行更改。
@ASGM 它是
。在 chrome 和 firefox 中测试
@user1363115 那么你的意思是它不是为空的吗？如果有Javascript添加的元素，:empty将不匹配。

标签： html css css-selectors

【解决方案1】：

根据MDN

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

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

【讨论】：

等等...里面的 \n 或 \t 会不会让它不为空？
没有节点，但仍然有一个换行符和几个制表符。
实际上，是的，我取出了 \n\t 并使其匹配。这非常不方便，因为它使 HTML 源代码看起来很难看，但无论如何它都可以工作。谢谢
@Jake：是的，\n 和\t 被视为:empty 的空白。这绝对不方便；我相信有人提议使用新的选择器来匹配一个为空或只包含空格的元素。