一个影响文本选择的超奇怪的 CSS Bug

Avatar of Chris Coyier
Chris Coyier 于

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

您知道您可以使用 ::selection（某种程度上）来设置选中文本的样式吗？好吧，Jeff Starr 发现了一个非常奇怪的 CSS Bug。

如果您

  1. 将该选择器留空
  2. 从外部样式表（而不是 <style> 块）链接它

选择文本将完全没有样式。😳😬😕

换句话说，如果您使用 <link rel="stylesheet" ...> 加载包含这些*空*选择器的 CSS

::-moz-selection {
}
::selection {
}

那么文本*看起来*是不可选择的。您实际上仍然可以选择文本，所以它有点像您使用了 ::selection { background: transparent; } 而不是 user-select: none;。

大多数浏览器（Safari 是唯一例外）都以这种方式表现，这使得它看起来像是规范中规定的，但我认为这是一个 Bug。一个没有任何属性的选择器应该基本上被忽略，而不是做一些如此强硬的事情。

Jeff 做了一个演示。我也做了同样的操作来确认这一点。

查看 CodePen 上 Chris Coyier (@chriscoyier) 的 Pen
不可见的文本选择 Bug。
在 CodePen 上。

嘘！ 创建一个 DigitalOcean 账户并获得 200 美元的免费信用额度，用于基于云的托管和服务。

评论

  1. jech
    评论永久链接#

    如果您有以下内容，则会出现相同的效果

    body{
   background: black;
}
::selection {
    background: black;
}
  2. Tyler
    评论永久链接#

    Android 上的 Chrome 中也出现了这种情况。

  3. Konstantin
    评论永久链接#

    这个伪元素比人们想象的还有更多奇怪的副作用。例如，它不符合人们期望的特定性规则。

    代码示例

    • Ilya Streltsyn
      评论永久链接#

      我认为您的示例的行为没有问题。直接分配给元素的样式始终会覆盖从父元素继承的样式，无论这些样式如何分配给该父元素。唯一可能不太直观的部分是，嵌套元素的 ::selection 被认为是父元素的 ::selection 的子元素。

    • Konstantin
      评论永久链接#

      @Ilya Streltsyn，
      这可能有助于您理解我的意思。此外，Chromium 中存在一个关于相同行为的新 Bug。

  4. Adam Coti
    评论永久链接#

    在 Edge 中，文本以默认颜色可见地被选中。

  5. a
    评论永久链接#

    仅供参考

    在以下版本中按预期工作（选择时会选中）：

    Safari：11.1.2 (11605.3.8.1)
    Mac：10.11.6 (El Capitan)

  6. Benjamin Solum
    评论永久链接#

    文章发布时机正好。我刚刚在个人项目中遇到了这个问题。顺便说一句，当您指定一个无效值的属性时，也会出现此问题，例如：

    ::-moz-selection {
  background: selectionColor;
}

::selection {
  background: selectionColor;
}

    在 VS Code 中使用代码片段时必须注意:)

此评论线程已关闭。如果您有重要信息需要分享，请联系我们。

© 2024 . All rights reserved.