LI:only-child CSS Selector 4 之间的区别？

【问题标题】：Different between OL > LI:only-child and !OL > LI:only-child CSS Selector 4?OL > LI:only-child 和 !OL > LI:only-child CSS Selector 4 之间的区别？
【发布时间】：2015-04-11 12:40:00
【问题描述】：

例如，以下选择器表示有序列表 OL 的列表项 LI 唯一子项：

OL > LI:only-child

但是下面的一个表示一个有序列表 OL 有一个唯一的孩子，那个孩子是一个 LI：

!OL > LI:only-child

这两个选择器表示的树结构是一样的，但是选择器的主题不同。

我不明白这个不同，你能给我举个例子吗

【问题讨论】：

第二个选择器在我看来像CSS4。我很确定它仍在起草中。不同的是，第二个是选择父级。
是的，你是对的@JoshCrozier ....
@user1153551 如果您不接受答案，请在评论中说明原因。
@dystroy 没有什么大的原因。但这是草拟的，因此现在不需要此信息。也不支持任何浏览器，所以我应该删除。你说呢？

标签： html css css-selectors

【解决方案1】：

您的示例取自the W3C's draft。

区别在于规则适用的元素。

在第一种情况下，它是LI，因为默认情况下该规则适用于选择器的最后一个元素。

在第二种情况下，它是OL，其中包含!。

假设你有这种风格：

!OL > LI:only-child {
   background: yellow;
}

那么背景会应用到整个OL。

【讨论】：

1+ 我很好奇! 是否会被发布。我认为pseudo 横穿DOM 的能力会产生影响在性能上，虽然我相信它会是最小的。
@JoshCrozier 我不知道比你多。而且我也怀疑是否将其放入可能如此繁重的 CSS 选择器是一个好主意。
我认为作者应该用其他东西替换! 标记，因为!OL 看起来像:not(OL)。