“为什么我们没有 ::first-column
?”
我前几天听到有人问这个问题,这是一个合理的问题。我甚至会进一步询问 ::nth-column()
或其他与 CSS 列 相关的内容。我们有像 ::first-letter
和 ::first-line
这样的东西。为什么没有其他的呢?
在“nth”群体中,有很多值得注意的东西缺失。七年前,我写了 “呼吁 ::nth-everything”,其中包含明确的用例,例如,可能选择段落的前两行。
我不知道所有技术细节,但我知道为什么 CSS 中没有所有这些东西有一些相当合理的理由。部分原因是很难将其规范化(例如,跨书面语言的单词和字符变得很棘手),部分原因是很难实现它们。我 刚刚发现的是 有一份 FAQ 文档对此进行了解释!
那么,为什么我们没有 ::first-column?
因为它是“依赖布局的选择器”。
这属于一类在 CSS 中不太可能解决的问题:一般来说,选择器,特别是伪类,不能依赖布局,因为否则它们可以用来以一种不再匹配的方式修改布局,这会将布局修改回原来的位置,所以它们再次匹配,我们陷入了一个无限循环的矛盾中。
举个简单的例子
:stuck { position: static; }
现在怎么办?
Web 开发人员可能希望使用 :stuck 伪类应用的一些更改可能是安全的,并且不会触发此类循环,但选择器是一种通用机制,并且会启用这种矛盾。
因此,即使许多使用此类伪类试图解决的问题是合理的,选择器也不太可能是答案。
我们得到的是基本上是问题的无限循环(但请阅读 FAQ——它详细介绍了其细微差别)。出于相关原因,我们没有在 CSS 中使用元素查询。
这有点难以理解,因为即使像 ::first-line
这样的东西也充满了悖论。假设您使用它来增加 font-size
。这意味着较少的字符适合一行,因此最初匹配的字符现在被向下推,不再匹配。似乎有点循环,但这个问题已经解决了。此外,像 :hover
可能导致抖动 这样的经典问题。该文档用清晰的术语讨论了这些问题。它并非一成不变的!
整个 FAQ 都是一篇引人入胜的文章,涵盖的内容远不止这种情况。