::selection 伪选择器忽略 ::before 伪元素

Question

我正在使用 Clipboard.js 将 .container 的内容复制到用户的剪贴板。我已经为这个.container 设置了::selection / ::-moz-selection 的样式，它是子元素，因为在复制到剪贴板的过程中，所有子元素都是.select()ed。

除了::before（可能是::after）伪元素外，它的效果很好。 ::before 或多或少忽略了我的 css 声明。我将::before 中的counter css 属性用作content。

这是一个暴露问题的 sn-p。我没有包含任何 JS，因为没有必要公开这个问题。单击并拖动代码块，您将看到::selection 上除了::before 伪元素外没有突出显示任何内容。

谁能告诉我如何覆盖::before 伪元素的::selection 使其不可见？

编辑：这似乎是 Safari/Chrome（大概是 -webkit- 问题）。经过一些隔离测试后，Firefox 中没有发生。

.html.container {
	position: relative;
	display: block;
	padding: .9375rem .9375rem .9375rem 2.5rem;
	margin-bottom: 20px;
	background: rgba(38, 38, 38, .08);
	counter-reset: lines;
}
.html.container::before {
	content: '';
	position: absolute;
	top: 0;
    left: 0;
	width: 5px;
	height: 100%;
	background: grey;
}

.html.syntax {
	display: block;
	border-left: .0625rem solid black;
}

.html.syntax *::selection {
	background: transparent;
	color: inherit;
}

.html.syntax *::-moz-selection {
	background: transparent;
	color: inherit;
}

.html.line::before {
	content: counter(lines);
	position: absolute;
	left: 5px;
	width: 25px;
    color: grey;
	text-align: right;
	transition: all .25s ease;
}
.html.line {
	display: block;
	padding-left: 15;
	counter-increment: lines;
}

.html.line::before::selection {
	background: transparent;
	color: inherit;
}

.html.syntax::before::-moz-selection {
	background: transparent;
	color: inherit;
}

<div class="js html container" data-clipboard-target="#\<h1\>">
	<code class="html syntax" id="<h1>">
		<span class="html line">
			<span class="html comment">&lt;!-- Heading level 1 --&gt;</span>
		</span>
		<span class="html line">
			&lt;<span class="html tag">h1</span>&gt;Heading level 1&lt;<span class="html tag">/h1</span>&gt;
		</span>
	</code>
</div>

Answer 1

您可以在“html line”分类跨度上使用数据属性，这可以防止数字出现在 Chrome 的选择中。这样做的缺点是你会失去 CSS 计数器来自动增加行号：

<div class="js html container" data-clipboard-target="#\<h1\>">
    <code class="html syntax" id="<h1>">
        <span class="html line" data-pseudo-content="1">
            <span class="html comment">&lt;!-- Heading level 1 --&gt;</span>
        </span>
        <span class="html line" data-pseudo-content="2">
            &lt;<span class="html tag">h1</span>&gt;Heading level 1&lt;<span class="html tag">/h1</span>&gt;
        </span>
    </code>
</div>

https://jsfiddle.net/ohyj81c4/

参考https://danoc.me/blog/css-prevent-copy/

您不能更改伪元素选择颜色的原因是您只能在选择器中使用 1 个伪元素。 ::selection 和 ::before 都属于此定义，而不是 ::selection 是 pseudo-class，如 :active、:visited 等。

参考：https://developer.mozilla.org/en/docs/Web/CSS/Pseudo-elements