Question

Google Chrome 58.0.3029.110（x64），Firefox 53.0.2（x64），Linux

为什么textarea元素的第一个字母不是红色？

textarea::first-line工作正常（在我的谷歌浏览器中，但在Firefox中没有），但textarea::first-letter没有做到。在我的例子中工作。我对input元素也有类似的行为。

如果我使用p代替textarea或input，我对这两种情况都没有问题。

＆＃13;

input::first-line,
textarea::first-line {
  color: green;
}

input::first-letter,
textarea::first-letter {
  color: red;
}

＆＃13;

<textarea cols='40' rows='4'>Sfrrr sdfsdfsd dsf ddsfds fds fdsfds fsdfds fsdfdsf sd fdss d dsf ssdfddfsddsfdssdsf ss dfsds sdf sdf sdfs fsf sf sdfsdfsdfs df sdffsdf sf sdf sdf sf sf sdf sdf sdf sdf sf sdf sdf sf sdf sdf sdf sfsdfsdf sdf sdf sdfs sdf sdfds dsf sdf sdf sdfsdf sdf dsfs</textarea>
<input value='Sfrrr sdfsdfsd dsf ddsfds fds fdsfds fsdfds' />

＆＃13;

Answer 1

要使 :: first-letter 伪元素起作用，您需要将元素的display属性设置为block并使用块级容器：

在CSS中， :: first-letter 伪元素适用于块状容器，例如block，list-item，table-cell，table-caption和inline-block元素。

:: first-letter 伪元素可以与包含文本的所有此类元素一起使用，或者在包含文本的同一流中具有后代。

来自https://www.w3.org/TR/css3-selectors/#first-letter

textarea, input {
  display: block;
}

input::first-line,
textarea::first-line {
  color: green;
}

p::first-letter {
  color: red;
}

<p><textarea cols='40' rows='4'>Sfrrr sdfsdfsd dsf ddsfds fds fdsfds fsdfds fsdfdsf sd fdss d dsf ssdfddfsddsfdssdsf ss dfsds sdf sdf sdfs fsf sf sdfsdfsdfs df sdffsdf sf sdf sdf sf sf sdf sdf sdf sdf sf sdf sdf sf sdf sdf sdf sfsdfsdf sdf sdf sdfs sdf sdfds dsf sdf sdf sdfsdf sdf dsfs</textarea></p>
<p><input value='Sfrrr sdfsdfsd dsf ddsfds fds fdsfds fsdfds' /></p>

为什么`textarea`和`input`元素的第一个字母不是红色的？

1 个答案: