如何修改WordPress站点名称首字母？:nth-child/:nth-letter伪类失效求助

首先，你的尝试没成功主要有两个核心问题：

• :nth-letter不是标准CSS伪类，目前还处于提案阶段，没有任何主流浏览器支持它，所以这个写法从根本上就行不通。
• 你的选择器逻辑有误：header .logo .site-title:nth-child(1)是用来选择.logo下的第一个子元素（也就是.site-title本身），但你要修改的是这个元素内部的字母，这种嵌套伪类的写法没法定位到元素内的文字字符。

针对不同需求的解决方案 #

1. 只修改首字母（最简单的方案）

如果只需要修改首字母样式，直接用标准的::first-letter伪元素就可以，浏览器支持度拉满：

header .logo .site-title::first-letter {
  color: pink;
  /* 还可以加其他样式，比如字号、字体 */
  font-size: 1.2em;
  font-weight: bold;
}

2. 修改前两个字母（需要额外处理）

因为CSS没有原生选择多字母的方法，我们需要先把前两个字母用<span>包裹起来，再用CSS定位：

方法A：通过WordPress过滤器修改（推荐，后端处理更稳定）

在你的主题functions.php文件中添加以下代码，它会自动给站点名称的前两个字母加上专属类：

add_filter('bloginfo', 'wrap_site_title_first_two_letters', 10, 2);
function wrap_site_title_first_two_letters($output, $show) {
  // 只处理前台的站点名称输出
  if ($show === 'name' && !is_admin()) {
    if (strlen($output) >= 2) {
      $first_two_chars = substr($output, 0, 2);
      $remaining_text = substr($output, 2);
      $output = '<span class="site-title-first-two">' . $first_two_chars . '</span>' . $remaining_text;
    }
  }
  return $output;
}

然后就可以用CSS给这个类加样式了：

header .logo .site-title .site-title-first-two {
  color: pink;
}

方法B：用JavaScript动态处理（不用改主题文件）

如果不想修改PHP代码，可以用JS在页面加载后动态包裹字母：

document.addEventListener('DOMContentLoaded', function() {
  const siteTitleElement = document.querySelector('header .logo .site-title');
  if (!siteTitleElement) return;

  const titleText = siteTitleElement.textContent;
  if (titleText.length < 2) return;

  const firstTwo = titleText.slice(0, 2);
  const restOfTitle = titleText.slice(2);
  siteTitleElement.innerHTML = `<span class="site-title-first-two">${firstTwo}</span>${restOfTitle}`;
});

同样，用CSS给.site-title-first-two设置样式即可。

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