为什么 CSS 选择器 :parent 不起作用？

Question

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

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

<ul id="cepage_list" />

用户在上面的表单中输入时会填充（添加lis），效果很好。
现在我在 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 选择器适用）
• 关于清除列表（.empty() 使用 jQuery），好的。

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

（在 Chrome 和 Firefox 14 上测试）

Answer 1

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

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

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

Answer 2

没有一个 :parent 选择器，您将其称为。

这是more about parent selectors 的链接。