为什么 ::first-line 不适用于预包装？

Question

HTML

  <div class="">
    Blahblah blah blah

    asndlansdlansdlajdbnalsnd        laksndlaknsdlak
    lksdnalksdnlaknsdl         akbsjdakjsbdakjsdlajsndl
     akjsbaksjdalsdn asldknalsndla asdlk nalsdnalsknd
  </div>

CSS

div::first-line {font-weight: bolder; color: blue;}
div {white-space: pre-wrap;}

它仅适用于预包装。 T_T

我的想法是突出显示每个 div 中的每个第一行，但我对 div 使用预换行以更方便地键入。感谢帮助。 )

Answer 1

您的 <div class=""> 开始标记后有一个换行符。所以 div 中的第一行是空的，这就是 none 文本显示为蓝色的原因。

我不知道你所说的 "using pre-wrap for divs to type more convenient" 是什么意思，并且不可能从你的示例中的乱码中推断出你的用例，但是无论你试图完成什么，你都可以看到 [=当您删除初始换行符时，13=] 即使在 white-space: pre-wrap 中也能正常工作：

div::first-line {font-weight: bolder; color: blue;}
div {white-space: pre-wrap;}

<div class="">Blahblah blah blah

  asndlansdlansdlajdbnalsnd        laksndlaknsdlak
  lksdnalksdnlaknsdl         akbsjdakjsbdakjsdlajsndl
   akjsbaksjdalsdn asldknalsndla asdlk nalsdnalsknd
</div>

为什么 ::first-line 不适用于预包装？

Why ::first-line doesn't work with pre-wrap?

html

css

pseudo-element