如何仅用CSS修改<li>中Sale项文本颜色且不影响电话号码？

嘿，我来帮你搞定这个头疼的问题！核心难点在于"Sale"和电话号码共享同一个<li>元素，直接给<li>设置颜色会把所有文本都改掉，而你又没法修改HTML结构。下面给你两种靠谱的解决方案，都不需要动HTML：

方法一：使用::first-word选择器（简洁首选） #

如果"Sale"是<li>里的第一个单词，这个方法最方便，现代浏览器都支持：

/* 设置电话号码的默认颜色 */
li {
  color: #333; /* 换成你想要的电话号码颜色，比如深灰 */
}

/* 单独给第一个单词"Sale"设置颜色 */
li::first-word {
  color: #ff0000; /* 换成你想要的Sale颜色，比如红色 */
}

原理很简单：::first-word会精准选中<li>内的第一个单词，单独给它赋予颜色，剩下的文本（也就是电话号码）会继承<li>的默认颜色，完美分离两者的样式。

方法二：伪元素+定位（兼容性更强） #

如果需要兼容更旧的浏览器（比如IE11及以下），或者"Sale"不是第一个单词（不过你说的是"Sale"项，大概率是开头），可以用这个方法：

li {
  color: #333; /* 电话号码的颜色 */
  position: relative;
  padding-left: 4ch; /* 预留出"Sale"的宽度，4ch对应4个字符的宽度，刚好匹配"Sale" */
}

li::before {
  content: "Sale"; /* 插入Sale文本 */
  color: #ff0000; /* Sale的颜色 */
  position: absolute;
  left: 0;
  top: 0;
}

这个方法的思路是：用伪元素生成"Sale"文本并定位到<li>的左侧，同时给<li>设置左内边距，让原来的文本（包括"Sale"和电话号码）向右偏移，刚好被伪元素的"Sale"覆盖，而电话号码部分则显示默认颜色。注意要根据实际字体调整padding-left的数值，ch单位是相对当前字体"0"字符的宽度，用它比固定像素更灵活。

为什么你之前的方案出问题？ #

• 如果同时设置了<li>的color: red和background-color: yellow，那整个<li>的文本都会变成红色，背景黄色，自然没法区分；
• 如果只设置了background-color: yellow，那文本颜色还是默认的，当然看不到Sale的颜色变化。

这两种方法都能完美解决你的需求，选哪个看你对兼容性的要求啦！

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