为什么在CSS中：首字母，文本转换：大写；不起作用？

Question

在这种情况下，我想使用单词“ things” uppercase的第一个字母，但是出了点问题。我的错在哪里？

.things:first-letter{
  text-transform: uppercase;
}

<p class="some-things">Some <span class="things">things</span></p>

Answer 1

因为::first-letter only works on block-level elements：

  

[...]将样式应用于块级元素第一行的首字母 [...]

<span>的{​​{3}}：

  

[...]一个是一个内联元素。

Answer 2

您可以尝试

.things {
  text-transform: capitalize;
}

<p class="some-things">Some <span class="things">things are working now</span></p>

Answer 3

棘手，但看起来:first-letter仅适用于块级元素

span {
  display: inline-block;
}

.things:first-letter{
  text-transform: uppercase;
}

<p class="some-things">Some <span class="things">things</span></p>

https://developer.mozilla.org/en-US/docs/Web/CSS/::first-letter

  

:: first-letter CSS伪元素将样式应用于第一个   块级元素的第一行字母，但仅限于   其他内容（例如图像或嵌入式表）之前。

Answer 4

您只能使用由选择器:: frist-letter插入的capitalize值

赞：

.things {
    text-transform: capitalize;
}

为了使首字母大写。