Question

我有一个元素，我使用伪元素（::after）来设置叠加层的样式。由于技术原因，我不能/不想使用其他元素（例如div）来添加叠加层。伪元素绝对定位并出现在实际元素的前面。我很惊讶地看到div内的文本仍然是可选的，“通过”伪元素。我玩过z-index和pointer-events但没有成功。有关（外部）示例，请参阅此fiddle。

为什么会这样？为什么仍然可以用鼠标选择文本？除user-select之外还有其他解决办法吗？

div {
  position: relative;
}

div::after {
  position: absolute;
  content: '';
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0.4;
  background-color: black;
}

<div>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sollicitudin dui nec neque rutrum, eu auctor nulla accumsan. Quisque non eleifend nibh. Fusce aliquet imperdiet odio vitae pretium. Nam tincidunt mattis ante, nec consectetur diam maximus
    vel. Fusce at lectus porttitor, feugiat purus sed, porta felis. Morbi tempus ante a orci finibus rhoncus. Nullam a porta enim. Sed id eros convallis, consectetur turpis a, gravida nunc. Nullam sed dui interdum diam placerat suscipit sit amet nec mi.
    Maecenas ultricies metus massa, id vestibulum nisi posuere facilisis. Aliquam erat volutpat. Quisque blandit condimentum augue. Nullam pulvinar turpis libero, id luctus dolor ultricies quis.</p>
</div>

Answer 1

关于你的问题：

为什么会这样？

这似乎是由于生成的内容本身不可选择的事实。见How can I make generated content selectable?）

尝试选择以下代码段中的文字：

div:before {
 content: 'generated content - before... ';
}
div:after {
 content: '...generated content - after';
}

<div>Only content of div is selectable</div>

显然，选择只是选择出现在DOM中的元素并根据CSS 2.1 spec：

文档中不会出现伪元素和伪类来源或文件树。

因此，在叠加层上进行选择时，将忽略叠加层，而是选择div中的文本

话虽如此，the spec here似乎说生成的内容应可选择

生成的内容应该是可搜索的，可选择的和可用的辅助技术

...但据我所知，该规范的某些内容尚未在任何浏览器中实现。

Answer 2

如果您不想使用user-select: none，可以选择将::selection设置为透明。

p::selection {
  background-color: transparent;
}

这并不是隐藏选择，但也无法突出显示。除了移动版和Firefox版之外，它与most of the browser兼容（您必须使用::-moz-selection）。

＆＃13;

div::after {
  position: absolute;
  content: '';
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0.4;
  background-color: black;
}

p::selection {
  background-color: transparent;
}

p::-moz-selection {
  background-color: transparent;
}

＆＃13;

<div>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sollicitudin dui nec neque rutrum, eu auctor nulla accumsan. Quisque non eleifend nibh. Fusce aliquet imperdiet odio vitae pretium. Nam tincidunt mattis ante, nec consectetur diam maximus
    vel. Fusce at lectus porttitor, feugiat purus sed, porta felis. Morbi tempus ante a orci finibus rhoncus. Nullam a porta enim. Sed id eros convallis, consectetur turpis a, gravida nunc. Nullam sed dui interdum diam placerat suscipit sit amet nec mi.
    Maecenas ultricies metus massa, id vestibulum nisi posuere facilisis. Aliquam erat volutpat. Quisque blandit condimentum augue. Nullam pulvinar turpis libero, id luctus dolor ultricies quis.</p>
</div>

＆＃13;

为什么我可以在定位的伪元素下选择文本？

2 个答案: