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 .class2
Chrome会保持空间不变.也许,它认为之间的空间.some-class
,并:first-child
成为非语义空间,因为它认为不可能有一个伪类没有某种选择的.
但我检查了标准,并没有说伪类必须有选择器的任何地方.同时,所有带有伪类的例子都包含一个元素选择器
p:first-child
Run Code Online (Sandbox Code Playgroud)
所以我很困惑.这个CSS选择器是不正确的还是Chrome的"减少数据使用"中存在错误?
:first-child
作为独立选择器是有效的,这似乎是移动版 Chrome 中的一个错误。我们可以通过W3C 的 CSS Validator来确认这一点。
Run Code Online (Sandbox Code Playgroud):first-child { background: #F00; }
恭喜!未发现错误。
事实上,选择器级别 3 规范的选择器部分中列出的所有内容作为独立选择器都是有效的。我想这些示例还包含元素选择器的原因是为了避免混淆并展示如何在该特定元素上使用它。:first-child