css - 为什么CSS选择器是:parent not working?

Question

我有一个列表，一开始是空的，然后用 JavaScript 动态填充。现在我希望列表只有在不为空时才有边框，但是 :empty 和 parent 选择器不匹配。

在 html.erb 文件中，列表声明如下:

<ul id="cepage_list" />

根据用户在上面的表单中输入的内容填充(添加 li)，工作正常。
现在我在 CSS 中有这个:

ul#cepage_list
{
  list-style-type: none;
  margin: 0px;
  padding-left:0px;
  background-color: white;     
}
ul#cepage_list:parent
{
  border: 1px dotted blue;
}
ul#cepage_list:empty
{
  border: 1px dotted red;
}

默认样式应用正确，但带有伪类选择器的应用很奇怪。这是行为:

• 在页面加载时，应用红色边框，没关系
• 在添加 li 时，没有任何内容(希望 :parent 选择器适用)
• 清除列表(使用 jQuery 的 .empty())，确定。

但是为什么在列表下有子li时，:parent伪类无法识别？

(在 Chrome 和 Firefox 14 上测试)

Answer 1

<ul>不是自闭标签。将其更改为:

<ul id="cepage_list"></ul>

此外，:parent不是真正的伪类。你是说 :not(:empty) ？