::選擇僞選擇器忽略::僞元素之前

我正在使用Clipboard.js將.container的內容複製到用戶的剪貼板。我已將::selection/::-moz-selection設置爲此.container的樣式，並且它是子元素，因爲在複製到剪貼板過程中所有子元素均爲.select()。::選擇僞選擇器忽略::僞元素之前

除了在::before（大概是::after）僞元素之外，它工作良好。 ::before或多或少地忽略了我的css聲明。我使用::before中的counter css屬性作爲content。

下面是暴露問題的代碼片段。我沒有包含任何JS，因爲它沒有必要公開這個問題。點擊並拖動代碼塊，您將看到::selection上沒有內容突出顯示，但::before僞元素除外。

任何人都可以告訴我如何覆蓋::selection的::before僞元素，使其不可見？

編輯：這似乎是一個Safari /鉻（大概-webkit-問題）。在進行一些隔離測試後，不會在Firefox中發生。

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

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

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

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

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

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

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

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

來源

2017-01-23 danMad

您可以在「HTML線」使用的數據屬性歸類跨度，這樣可以防止數字出現在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/