没有任何选择器的Css伪类,可以吗?

sno*_*ity 6 css google-chrome css-selectors

选择器就像

.some-class :first-child
Run Code Online (Sandbox Code Playgroud)

选择内部第一个子节点.some-class在所有浏览器中按预期工作,即使在IE8中也是如此.

但移动Chrome的"Reduce数据选项"会删除之间的空格,.some-class:first-child通过将样式应用于.some-class元素本身来打破CSS .在其他情况下,.class1 .class2Chrome会保持空间不变.也许,它认为之间的空间.some-class,并:first-child成为非语义空间,因为它认为不可能有一个伪类没有某种选择的.

但我检查了标准,并没有说伪类必须有选择器的任何地方.同时,所有带有伪类的例子都包含一个元素选择器

p:first-child
Run Code Online (Sandbox Code Playgroud)

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

Jam*_*lly 4

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

:first-child { background: #F00; }
Run Code Online (Sandbox Code Playgroud)

恭喜!未发现错误。

事实上,选择器级别 3 规范的选择器部分中列出的所有内容作为独立选择器都是有效的。我想这些示例还包含元素选择器的原因是为了避免混淆并展示如何在该特定元素上使用它。:first-child

  • 伪类本身有效,因为它是一个简单的选择器,就像类选择器或 ID 选择器本身有效一样。不以类型选择器开头的选择器被称为具有隐式“*”选择器。这包括伪元素(例如“*、:before、:after { box-sizing: border-box; }”)。 (2认同)