如何不使用额外标签仅通过CSS为<p>标签内指定文本设置样式？

要在不加<span>/<strong>这类额外标签、尽量不用JavaScript的前提下，给<p>标签内的"Amit"单独设置样式，CSS本身没有直接匹配文本内容的选择器，但可以通过以下技巧实现（仅适用于文本内容和位置固定的场景）：

方法1：背景渐变+文字裁剪 #

针对第一个<p>标签里的"Amit"，可以通过计算文本宽度比例，用线性渐变定位目标文本区域，再结合background-clip: text实现样式变化：

/* 第一个p标签里的Amit变色 */
p:first-child {
  background: linear-gradient(to right, #000 0%, #000 65%, #ff0000 65%, #ff0000 80%, #000 80%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

调整渐变中的百分比数值，就能精准定位到"Amit"所在的宽度区间，把对应区间的颜色改成你需要的样式（示例里是红色），其余部分保持默认文本色。

方法2：伪元素覆盖定位 #

如果"Amit"的位置固定，也可以用绝对定位的伪元素生成相同文本，覆盖在原文本上实现样式：

p:first-child {
  position: relative;
  display: inline-block;
}

p:first-child::after {
  content: "Amit";
  position: absolute;
  left: 70px; /* 根据实际布局调整偏移量 */
  color: #ff0000;
  font-weight: bold;
  background: #fff; /* 背景色和父元素/页面背景一致，覆盖原文本 */
}

这种方法需要手动调整伪元素的left值来对齐原文本，同时确保背景色和周围环境一致，避免露出原文本。

注意事项 #

• 以上方法都依赖文本内容和位置固定，如果文本动态变更，这些技巧会失效。
• 若多个<p>里都有"Amit"，需要逐个调整样式参数，通用性有限。
• 纯CSS无法实现动态匹配任意位置的"Amit"，如果需要适配动态内容，还是得用JavaScript动态给目标文本包裹标签，但你要求尽量不用JS，所以优先考虑上面的CSS方案。

内容的提问来源于stack exchange，提问作者user20720626