没有任何选择器的 Css 伪类，可以吗？

Posted 2023-03-06

【中文标题】没有任何选择器的 Css 伪类，可以吗？

【英文标题】：Css pseudo-classes without any selector, is it ok?

【发布时间】：2015-03-10 00:56:06

【问题描述】：

选择器喜欢

.some-class :first-child

选择.some-class 中的第一个子元素在所有浏览器中都可以正常工作，即使在 IE8 中也是如此。

但移动版 Chrome 的“减少数据选项”会删除 .some-class 和 :first-child 之间的空格，并通过将样式应用于 .some-class 元素本身来破坏 CSS。在其他情况下，如.class1 .class2 Chrome 会保持空间不变。可能它认为.some-class 和:first-child 之间的空间是非语义空间，因为它认为没有某种选择器就不可能有伪类。

但是我已经检查了标准，它没有说伪类必须有一个选择器。同时，所有带有伪类的示例都包含一个元素选择器，例如

p:first-child

所以我很困惑。这个 CSS 选择器是不正确的还是 Chrome 的“减少数据使用”中存在错误？

【问题讨论】：

“Chrome 的“减少数据使用”有一个错误”

哇，你真的编不出来。这是IE9级别的废话。

【参考方案1】：

:first-child 作为独立选择器有效，这似乎是移动版 Chrome 中的一个错误。我们可以通过W3C's CSS Validator 确认这一点。

:first-child  background: #F00; 

恭喜！未发现错误。

事实上，Selectors Level 3 specification 的 Selectors 部分中列出的所有内容都可以作为独立的选择器。我想:first-child 的示例还包含元素选择器的原因是为了避免混淆并展示如何在该特定元素上使用它。

【讨论】：

@james-donelly 感谢您的广泛回答！我已向 Google 报告了该问题并附上了此 SO 问题的链接。

伪类本身是有效的，因为它是一个简单的选择器，就像类选择器或 ID 选择器本身是有效的一样。不以类型选择器开头的选择器被称为具有隐式* 选择器。这包括伪元素（例如*, :before, :after box-sizing: border-box; ）。

【参考方案2】：

我猜这是一个错误。 你应该能够解决它 .some-class *:first-child