<!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css">
p:before {
    content:"Former - ";
    color:red;
    font-family:"Tahoma" ,Times New Roman;
    font-size:70%;
}

p.normal:first-letter {
    font-size:40px;
    color:blue;
}
</style>
</head>
<body>
  <p class="normal">First character of this paragraph will
  be normal and will have font size 40px;</p>
</body>
</html>

这里,:before伪元素中的内容显示为红色,但我还想将“本段第一个字符”的字符“f”设置为蓝色。但相反,我看到“前”的“f”是蓝色的。
我想将:before.normal内容后面的第一个字母都应用到同一段落。这可能吗?如果是这样,怎么办?

最佳答案

通常,您可以使用:first-letter伪元素来实现这一点,但鉴于您拥有:before内容,而不是实际内容的第一个字母,:first-letter将匹配:before内容的第一个字母。
这意味着,与此相反:

<p class="normal">
  <p:before>Former - </p:before>
  <p.normal:first-letter>F</p.normal:first-letter>irst character of this paragraph will
  be normal and will have font size 40px;
</p>

你真的明白了:
<p class="normal">
  <p:before>
    <p.normal:first-letter>F</p.normal:first-letter>ormer -
  </p:before>
  First character of this paragraph will
  be normal and will have font size 40px;
</p>

由于css生成的内容是如何工作的,我认为纯css中没有一个解决方案可以在插入内容之前到达实际内容的第一个字母。
作为替代方案,可以使用span代替:first-letter伪元素,然后可以对其应用蓝色,但这意味着您必须插入额外的元素:
  <p class="normal"><span>F</span>irst character of this paragraph will
  be normal and will have font size 40px;</p>

p.normal span {
    font-size:40px;
    color:blue;
}

07-24 09:43
查看更多