::first-letter 也设置第一个字符的样式答案

【问题标题】：::first-letter also styles first character::first-letter 也设置第一个字符的样式
【发布时间】：2021-10-15 01:55:44
【问题描述】：

我有这个文本：

p::first-letter {
  color: red;
}

&lt;p&gt;"Welcome!"&lt;/p&gt;

但后来我意识到" 也有样式。

我尝试使用::before，但也没有用：

p::first-letter {
  color: red;
}

p::before {
  content: '"';
}

&lt;p&gt;Welcome!"&lt;/p&gt;

我怎么能设法只设置第一个字母的样式（在干净的代码中）？

【问题讨论】：

如果您想避免使用引号，我不确定您是否可以严格使用伪元素绕过它，但您可以将 w 包装在 span 中并给它一个类然后样式该课程满足您的需求。
我也有同样的想法，但那不是干净的代码... :o
您知道，这是意料之中的。见MDN - ::first:letter
添加到@AmauryHanser 的评论中，如果使用:before 和content 将任何文本注入到html 中，并且可能还有来自JavaScript 的任何注入，那么:first-letter 将与新生成文本的第一个字母和标点符号。 - 来自MDN ::first-letter

标签： html css

【解决方案1】：

只需float 第一个字符并使用:after 而不是:before

p::first-letter {
  color: red;
}

p::after {
  content: '"';
  float:left;
}

&lt;p&gt;Welcome!"&lt;/p&gt;

【讨论】：

【解决方案2】：

这是我在尝试和思考了一些 CSS/HTML 原则后得出的结论：

我将使用display: inline-block;，因为::first-letter 需要一个块才能使其内容工作。

请注意我使用 标签而不是 标签作为HTML W3 Consortium 认为它是无效的html 代码。您可以检查您的代码的有效性here

查看sandbox 或此处的实时示例：

.quote span {
  display: inline-block;
}

.quote span::first-letter {
  color: red;
}

&lt;q class="quote" cite="https://www.imdb.com/title/tt0062622/quotes/qt0396921"&gt;&lt;span&gt;This is a great quote&lt;/span&gt;&lt;/q&gt;

这里有更多关于标签的信息：

【讨论】：

嗯，有没有办法只用 css 来实现这一点？
我也在考虑将::after 设置为绝对位置并移动到左侧，但是结尾（引号的右侧）出现了问题。但是，这里还有另一个缺点（使用position 属性对性能不是很好，因为它更难渲染）。因此，HTML span 标记应该提供更好的整体性能。我会想其他方法来解决这个问题，如果有什么我会回来告诉你的

【解决方案3】：

您可以text-indent 段落并使用绝对定位的before，但您必须手动设置取决于文本大小的缩进。这不是一个超级干净的解决方案：它是一个“不那么脏”的解决方案。

p {
  text-indent: 5px;
}
p::first-letter {
  position:relative;
  color: red;
}

p::before {
  position:absolute;
  content: '"';
  left: 0;
}

&lt;p&gt;Welcome"&lt;/p&gt;

【讨论】：

【解决方案4】：

p::first-letter，它总是设置第一个字符的样式，为 W 设置一个像 W 这样的 span 元素，然后设置 span 的样式。

【讨论】：