依赖布局的选择器

Avatar of Chris Coyier
Chris Coyier

DigitalOcean 为您旅程的每个阶段提供云产品。 立即开始使用 200 美元的免费额度!

“为什么我们没有 ::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 都是一篇引人入胜的文章,涵盖的内容远不止这种情况。

直接链接 →