除CSS变量外，如何批量修改特定字号的文本字体大小？

以下几种方案可以帮你批量修改指定元素的特定字号：

1. CSS属性选择器精准匹配 #

如果目标元素的字号是通过内联style属性设置的，或者外部CSS里的写法比较统一，可以用属性选择器直接匹配：

/* 匹配所有包含font-size:14px或font-size: 14px的目标元素 */
p[style*="font-size:14px"], 
h1[style*="font-size:14px"], 
h2[style*="font-size:14px"], 
h3[style*="font-size:14px"], 
h4[style*="font-size:14px"],
p[style*="font-size: 14px"], 
h1[style*="font-size: 14px"], 
h2[style*="font-size: 14px"], 
h3[style*="font-size: 14px"], 
h4[style*="font-size: 14px"] {
  font-size: 16px !important;
}

注意：!important主要用于覆盖内联样式的优先级，如果是外部CSS设置的14px，可根据实际选择器权重调整，不一定需要该声明。

2. 批量覆盖目标元素的样式 #

如果你能明确原来设置14px的选择器范围，直接在原有CSS之后添加同/更高优先级的样式即可：

/* 直接针对目标元素批量设置新字号 */
p, h1, h2, h3, h4 {
  font-size: 16px;
}

如果原来的样式有更具体的选择器（比如.article p），则需要写更具体的选择器来覆盖：

.article p, .article h1, .article h2, .article h3, .article h4 {
  font-size: 16px;
}

3. 用CSS预处理器批量生成覆盖样式（若可重新编译CSS） #

如果项目原本使用Sass/LESS这类预处理器，可以用循环简化代码：

Sass示例： #

$target-elements: p, h1, h2, h3, h4;

@each $elem in $target-elements {
  #{$elem} {
    font-size: 16px;
  }
}

编译后会自动生成每个元素的字号设置，方便统一维护。

4. JavaScript动态修改 #

如果CSS覆盖的方式不好实现（比如字号是动态生成的），可以用JS遍历元素并修改：

// 选择所有目标元素
const elements = document.querySelectorAll('p, h1, h2, h3, h4');

elements.forEach(el => {
  // 获取元素计算后的实际字号
  const currentSize = window.getComputedStyle(el).fontSize;
  // 匹配14px的元素并修改
  if (currentSize === '14px') {
    el.style.fontSize = '16px';
  }
});

这个方法会实时检查元素的实际显示字号，不管样式是内联、外部还是动态生成的。

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