如何覆盖WordPress中.wp-site-blocks :focus的默认黑色轮廓样式？

原规则使用了:where()选择器，它的CSS特殊性权重为0，但由于WordPress默认样式可能加载在你的子主题样式之后，或者你的选择器匹配优先级不够，导致之前的自定义规则失效。以下是几种可行的解决方案：

• 使用与原规则完全一致的选择器覆盖
  直接复用原规则的选择器，确保你的CSS加载顺序在默认样式之后（子主题通常会自动满足这一点），无需!important即可生效：

  :where(.wp-site-blocks :focus) {
    outline: none;
  }
  

• 提高选择器特异性（更稳妥）
  直接指定具体的表单元素，通过更高的特异性强制覆盖默认规则，即使加载顺序有波动也能生效：

  .wp-site-blocks input:focus,
  .wp-site-blocks textarea:focus,
  .wp-site-blocks select:focus,
  .wp-site-blocks button:focus {
    outline: none;
  }
  

• 极端情况用!important兜底
  如果上述方法仍不生效，可添加!important强制覆盖，但不建议滥用：

  :where(.wp-site-blocks :focus) {
    outline: none !important;
  }
  

注意：移除:focus轮廓会影响键盘导航的可访问性，若必须移除，建议同时为:focus状态添加其他视觉提示（比如边框颜色变化、背景色变化等），确保无障碍体验。

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